Ionic 2 - List does not update

Question

I have an ion-list with a ngFor loop. Here is the html:

<ion-list>
    <ion-item *ngFor="let kiosk of kiosks" (click)="goToKioskProfilePage(kiosk)">
        {{kiosk.name}}
    </ion-item>
</ion-list>

And here is the constructor:

kiosks: any;

constructor(public navCtrl: NavController, navParams: NavParams, public locationTracker: LocationTracker, public api: ApiService, public zone: NgZone) {

    this.kiosks = [];

    this.zone.run(() => {
        this.locationTracker.getGeolocation().then(location => {
            this.api.getClosestKiosks(location, constants.AMOUNT_OF_CLOSEST_KIOSKS).then(
                data => {
                    console.log("ready");
                    this.kiosks = data['data'];
                },
                err => {
                    console.log(err);
                }
            );
        });
    });

}

The console logs "ready" but the list does not update. I already tried it with NgZone but it's still not working. Only when I open the sidemenu the list updates, but not before. Someone know how to fix that?

Answer 1

I've encountered a similar issue before. What fixed it for me was putting only the variable update/assignment in between zone.run(), as it's after the promise resolves that you want to update the values.

Try:

this.locationTracker.getGeolocation().then(location => {
    this.api.getClosestKiosks(location, constants.AMOUNT_OF_CLOSEST_KIOSKS).then(
        data => {
            console.log("ready");
            this.zone.run(() => {
                this.kiosks = data['data'];
            });
        },
        err => {
            console.log(err);
        }
    );
});