离子2不更新UI

我改变变量时，Ionic 2没有更新我的用户界面。离子2不更新UI

HTML：从TS文件

<ion-card *ngFor="let event of mEvents (click)="onEventCardClick(event)"> 
    <ion-card-content ion-item> 
     <span class="eventTitle">{{ event.title }}</span> <br/> 
     <span class="relativeDate">{{ event.getRelativeTimeString() }}</span> 
     <ion-badge item-end>{{ event.reservationsCount }}</ion-badge> 
     <ion-badge *ngIf="event.hasUnreadMessages" color="danger" item-end>{{ event.unreadMessagesCount }}</ion-badge> 
    </ion-card-content> 
</ion-card>

末：

this.fcm.onNotification().subscribe((notification:NotificationData) => { 
    if(!this.navCtrl.isActive(this.viewCtrl)) 
     return; 

    notification.event = JSON.parse(notification.event); 
    notification.reservation = JSON.parse(notification.reservation); 
    notification.reservation_message = JSON.parse(notification.reservation_message); 

    let eventId: number = notification.event.id; 
    for(let i=0; i<this.mEvents.length; i++) { 
     if(this.mEvents[i].id == eventId) { 
      this.mEvents[i].unreadMessagesCount++; 
      this.mEvents[i].hasUnreadMessages = true; 
      return; 
     } 
    } 
});

的问题是，我从我的服务器发送推送通知。我成功接收消息并更新相应的对象（Event）。但是这个最后的ion-badge元素在ion-card没有显示出来。它仍然“隐藏”。但是，如果我与UI交互，它会突然显示出来。

我该如何实现即时UI更新？我读了一些关于NgZone的文章，但其中一半说不应该使用，另一半说我应该使用它...

来源

2017-06-18 clzola

请注意：避免绑定2种方式与函数，因为Angular不会知道它何时更改，因此它被称为每个最小的东西变化。你的''ngFor'想念''''或者你的代码想念它也 –

@ThienHoang对于我的代码有什么改变，而不是* ngFor。我对角度来说是非常新的，实际上我开始使用离子而没有知识的角度在所有和我在飞行中学习 – clzola

使用ChangeDetectorRef。它检测变量中的更改并更新UI。在变量更改时，只要需要更新UI，就可以在构造函数中创建private ref:ChangeDetectorRef，然后调用this.ref.detectChanges()。

来源

2017-06-18 14:04:53

事实证明，当调度消息到我的订阅FCM用完当前NgZone，什么都是，然而它确实，但它运行在那之外如果我打包代码改变'this.zone.run（（）=> {/ * code here * /}'里面的变量'一切正常。 – clzola

离子2不更新UI

回答

相关问题