Anagular에서 페이지를 렌더링하려면 모든 데이터로드 ajax를 완료하는 방법? 내 페이지에서

Question

, 나는 데이터의 매트릭스 (테이블)을로드 할 페이지를 필요, 그래서 모든 데이터를 얻기 위해 3 개 요청합니다

• 열 데이터를
• 행 데이터
• 관계 데이터

모든 데이터가있는 후 관계 데이터를 가져 오는 데 getRelation(columnIndex, rowIndex) 함수를 사용합니다.

하지만 열이 앞에로드 될 때 Angular는 내 getRelation 메서드를 렌더링하려고 시도하지만 열 데이터가 없기 때문에 오류가 발생합니다.

아마도 내 기능에 if 조건을 넣을 수는 있지만 그저이 상황을 해결하는 데 더 좋은 방법이 있습니까?

this.relations = []; 
this.columns = []; 
this.rows = []; 
this.getRalation = function getRalation(columnIndex, rowIndex) { 
    var column= this.columns[columnIndex]; 
    var row= this.rows[rowIndex] 

    var relation = $myService.getSomthing(this.relations, column.ID, row.ID); 

    return relation; 
}.bind(this); 

$http.post(url, {}).then(function(res) { 
    this.rows = res.data; 
}.bind(this)); 

// same code for columns and relations 

Answer 1

사용 $q 서비스 :

$q.all([/*promise from row request*/,/*promise from column request*/]).then(function(result){ 
    var rows = result[0]; 
    var columns = result[1]; 
    //parse row and cols, use getRalation here 

}); 

Answer 2

이 된 colomns 후 행을 계산을 처리 할 경우 그것은 더 좋을 것이다. 자바 스크립트에서 약속을 사용하십시오. 당신은 당신이 약속을 결합 사용이 $q 서비스를 사용한다, 라이브러리 Q.에게 @ Vanojx1 사예드으로

https://github.com/kriskowal/q

Answer 3

를 사용할 수 있습니다. 자세한 내용은 $q documentation을 확인하십시오.

var rows = $http.post(url, {}).then(function(res) { 
    return res.data; 
}) 


var columns = $http.post(url, {}).then(function(res) { 
    return res.data; 
}) 

var relationship = $http.post(url, {}).then(function(res) { 
    return res.data; 
}) 


var results = []; 

$q.all([rows, columns, relationship]).then(function(result){ 
    for (var i = 0; i < result.length; i++){ 
     results.push(result[i]); 
    } 
    result[0] //rows data 
    result[1] //columns data 
    result[2] //relationship data 

});