Ionic - Onesignal - Auf handleNotificationReceived nicht aktualisiert Ansicht

Question

Ich habe versucht, ein Array zu aktualisieren, nachdem eine Benachrichtigung von Onesignal wie so erhalten:

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

Aber es nicht wie erwartet funktionieren.

Ich habe eine <textarea> in meiner getMsg.html Datei, wenn ich es eintippe, wird die Ansicht magisch aktualisiert (nachdem ich eine Benachrichtigung erhalten).

Und natürlich, wenn ich die Funktion getMessage() direkt verwenden, funktioniert es.

Was ich auch versuchte, ist die Ansicht mit aktualisieren/neu zu laden:

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

, aber ohne Glück.

Ionic: v3.4.0 
Cordova: v7.0.1 

Answer 1

Nach ein paar Tagen meines Gehirns zu brechen, das ich lösen es mit Hilfe der folgenden Website:

• Understanding Zones and Change Detection in Ionic 2 & Angular 2

Angular 2 verläuft innerhalb seiner eigenen speziellen Zone namens NgZone. Das Ausführen innerhalb einer Zone ermöglicht es, zu erkennen, wann asynchrone Aufgaben - Dinge, die den internen Status einer Anwendung und damit ihre Ansichten ändern können - beginnen und enden. Da diese asynchronen Tasks das einzige sind, was dazu führt, dass sich unsere Ansichten ändern, weiß Angular 2, dass eine Ansicht aktualisiert werden muss, wenn sie erkennt, wann sie ausgeführt werden.

Lösungscode:

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

    });  
}