Ionic 2 - 列表不更新

Question

我有一个带有 ngFor 循环的离子列表。这是 html:

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

这是构造函数：

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

}

控制台记录 "ready" 但列表未更新。我已经用 NgZone 试过了，但还是不行。只有当我打开侧边菜单时，列表才会更新，但之前不会。有人知道如何解决这个问题吗？

Answer 1

我以前遇到过类似的问题。为我修复它的是只将变量 update/assignment 放在 zone.run() 之间，因为它是在 promise 解决后你想更新值。

尝试：

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

Ionic 2 - 列表不更新

Ionic 2 - List does not update

list

auto-update

ionic2