Angular 2 *ngfor doesn't update with sequential http request responses

Question

I have an empty array, called rows and I want to display it with *ngFor. On each row of the array I pass the response from an http request. All the http requests are called sequentially. Even though the array is fed correctly, the *ngFor is never updated. I want to display each row sequentially by the time I receive its request response.

<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;
}

post the details of your http request please. – Pengyy Apr 04 '17 at 09:42 — Pengyy, Apr 04 '17 at 09:42
@n00dl3 I have added the http req – dimitris maf Apr 04 '17 at 09:55 — dimitris maf, Apr 04 '17 at 09:55
@Pengyy I have added the http req – dimitris maf Apr 04 '17 at 09:56 — dimitris maf, Apr 04 '17 at 09:56

score 0 · Answer 1 · answered Apr 04 '17 at 10:02

0

Use ChangeDetectorRef if view is not updated.

constructor(private ref: ChangeDetectorRef)

Use this.ref.detectChanges() when you update your array.

answered Apr 04 '17 at 10:02

RemyaJ

5,358
4
22
41

1

It doesn't seem to work. I ve post it just under the array update. – dimitris maf Apr 04 '17 at 10:10
Are you getting the value inside array correctly?.If it is just the view that is not getting updated, this should work. – RemyaJ Apr 04 '17 at 11:06
Yeap the array is updated correctly and all the requests are completed successfully. When I use the flag variable with the *ngIf in the outside div, I get all the rows at once. The thing is that I want to print them sequentially. – dimitris maf Apr 04 '17 at 11:16

score 0 · Accepted Answer · answered Apr 11 '17 at 13:15

I ve tried to change how I provide the object to rows array and instead of

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

I ve used this:

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

and it seems to work just fine. So the problem was in the array initialisation.

Angular 2 *ngfor doesn't update with sequential http request responses

2 Answers2