Angular 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)

и, кажется, работает просто отлично. Так что проблема была в инициализации массива.