离子 2 不更新 UI

Question

我在更改变量时遇到 Ionic 2 不更新 UI 的问题。

.html：

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

从 TS 文件结束：

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

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

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

Answer 1

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