각도 2 * ngfor가 순차적 HTTP 요청 응답으로 업데이트되지 않습니다.

Question

행이라는 빈 배열이 있고 * ngFor와 함께 표시하려고합니다. 배열의 각 행에서 HTTP 요청의 응답을 전달합니다. 모든 http 요청은 순차적으로 호출됩니다. 어레이가 올바르게 공급 되더라도 * ngFor는 절대로 업데이트되지 않습니다. 요청 응답을받을 때까지 각 행을 순차적으로 표시하려고합니다.

<div class="row" > 
    <my-rows 
     *ngFor="let row of rows | keys; trackBy: trackByFn; let index = index" 
     [month]='row.value' 
     [title]='row.key'> 
    </my-rows> 
</div> 

getRerports(url: string, dates: any, id: any){ 
    let params = new URLSearchParams() 
    params.set('company_id',id) 
    params.set('date',dates[0]) 
    this.authHttp.get(this._getReportsUrl,{search:params}) 
     .subscribe(
      data=>{ 
       let formatedDate = moment(data.json().date,'YYYY-MM-DD').format('MMMM YYYY') 
       this.rows[formatedDate] = data.json() 
       dates.splice(0,1) 
       this.flag = false 
       if(dates.length>0){ 
        this.getRerports(this._getReportsUrl,dates, id) 
       }else{ 
        this.flag=true 
       } 
      }, 
      err=> console.log(err) 
     ) 
} 

trackByFn(index:any, item:any) { 
    return index; 
} 

Answer 1

사용 ChangeDetectorRef보기가 업데이트되지 않은 경우.

constructor(private ref: ChangeDetectorRef) 

배열을 업데이트 할 때 this.ref.detectChanges()를 사용하십시오.

Answer 2

은 내가 행 배열로 객체를 제공하는 방법을 변경하려고했습니다 대신

this.rows[formatedDate] = data.json() 

의 나는 이것을 사용했습니다 :

let object = {key:formatedDate, value: data.json()} 
       this.rows.push(object) 

을하고 그냥 잘 작동하는 것 같다. 그래서 문제는 배열 초기화에있었습니다.