Question

我收到Onesignal的通知后尝试更新阵列，如下所示：

getMsg.ts ：

getMsg = Array<Object> = [];
...
constructor( ... private oneSignal: OneSignal ... ) {
...

    this.oneSignal.handleNotificationReceived().subscribe( () => {

        this.getMessage();
        console.log('handleNotificationReceived');                
    } );
}

getMessage () {

    this.getMsg.push( { text: 'some text' } );

    console.log( 'getMessage' );

    // Push is working
    console.log( JSON.stringify( this.getMsg ) ); // [{"text":"some text"}]
}

getMsg.html ：

...
<ion-list *ngFor="let m of getMsg">
    <ion-item>
        <p>{{ m.text }}</p>            
    </ion-item>
</ion-list>
...

但它没有按预期工作。

我的<textarea>文件中有getMsg.html，当我输入时，视图会神奇地更新（收到通知后）。

显然，如果我直接使用函数getMessage()，它就可以工作。

我也尝试过，用以下内容更新/重新加载视图：

this.navCtrl.setRoot( this.navCtrl.getActive().component );

但没有运气。

Ionic: v3.4.0
Cordova: v7.0.1

Answer 1

经过几天打破我的大脑后，我在以下网站的帮助下解决了这个问题：

Understanding Zones and Change Detection in Ionic 2 & Angular 2

Angular 2在其自己的特殊区域NgZone内部运行。在区域内运行允许人们检测异步任务何时 - 可以改变应用程序内部状态的事情，以及它的视图 - 开始和结束。由于这些异步任务是唯一会导致我们的视图发生变化的事情，因此通过检测它们何时被执行，Angular 2知道可能需要更新视图。

解决方案代码：

// Import NgZone
import { Component, NgZone } from '@angular/core';

// We add it to the constructor
constructor( ... private zone: NgZone, private oneSignal: OneSignal ... ) {
...

    this.oneSignal.handleNotificationReceived().subscribe( () => {

        this.getMessage();
    } );
}

getMessage () {

    // And here we run "NgZone"
    this.zone.run( () => {

        this.getMsg.push( { text: 'some text' } );

    } );       
}

Ionic - Onesignal - 关于handleNotificationReceived没有更新视图

1 个答案: