List 离子2-列表不更新

List 离子2-列表不更新,list,ionic2,auto-update,List,Ionic2,Auto Update,我有一个带有ngFor循环的离子列表。以下是html: <ion-list> <ion-item *ngFor="let kiosk of kiosks" (click)="goToKioskProfilePage(kiosk)"> {{kiosk.name}} </ion-item> </ion-list> 控制台记录“就绪”,但列表不更新。我已经用NgZone试过了,但仍然不起作用。只有当我打开侧菜单时,列表才

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

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

控制台记录“就绪”,但列表不更新。我已经用NgZone试过了,但仍然不起作用。只有当我打开侧菜单时,列表才会更新,但之前不会。有人知道如何解决这个问题吗?

我以前也遇到过类似的问题。对我来说,解决这个问题的方法是只将变量update/assignment放在zone.run()之间,因为在promise解析之后,您想要更新这些值

尝试:


如果您只是在区域内运行分配(而不是整个地理位置调用),它是否有效?类似于
this.zone.run(()=>{this.kiosks=data['data'];})您不应该使用区域。它应该在不使用zone的情况下进行更新,所以问题一定出在代码的其他部分。也许信息亭必须是公共的?@CarlosAdrián因为某些异步方法正在被调用(因此,在angular2之外运行),所以您必须让angular知道发生了什么变化,并且必须更新视图。如果
kiosk
属性不是公共的,则在尝试呈现视图时控制台中会显示一个错误。我的意思是,在我们从Ionic2应用程序中加载数据的上下文中不需要该错误。这段代码应该在没有区域调用的情况下刷新Ionic应用程序中的列表。这就是为什么我说问题来自代码的另一部分。事实上,由于数据来自geolocation异步调用后的应用程序内部(并且没有任何http请求、超时事件或用户交互),angular不会注意到数据中发生了更改。但是,是的,使用区域应该是最后的选择,这不是解决问题的最佳方式。。。
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);
                }
            );
        });
    });

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