Ionic 2 mit Versprechen aktualisiert die Ansicht nicht korrekt

Question

Es scheint, dass die Anwendung aus irgendeinem Grund nicht bis zur nächsten Aktion aktualisiert wird (klicken Sie zum zweiten Mal auf eine Schaltfläche).

Zum Beispiel:

import {Component} from '@angular/core'; 
import {SqlStorage} from "ionic-angular"; 

@Component({ 
    templateUrl: 'build/pages/authenticate/authenticate.html' 
}) 
export class AuthenticatePage { 
    private username: string; 
    private storage: SqlStorage = null; 
    private usernameTemp: string; 

    constructor() { 
    } 

    saveCredentials(){ 
    this.storage = new SqlStorage(); 
    this.storage.set("username", JSON.stringify(this.username)); 
    } 

    showCredentials(){ 
    let sqlStorage = new SqlStorage(); 
    sqlStorage.get('username').then((data) => { 
     if (data != null){ 
     this.usernameTemp = JSON.parse(data); 
     } else{ 
     this.usernameTemp = 'fail'; 
     } 
    }); 
    } 
} 

Ein Klick, der die showCredentials auslösen() Funktion wird nicht angezeigt usernameTemp auf dem Bildschirm, wenn der Bildschirm eine hat {{}} usernameTemp Abschnitt bis zum zweiten Mal angeklickt wird. Es zeigt immer den vorherigen Wert an - wenn Sie etwas schreiben und es mit saveCredentials() speichern, dann rufen Sie showCredentials() auf, ändern Sie den Wert und rufen Sie saveCredentials() auf, dann rufen Sie showCredentials() erneut auf - Sie sehen den ersten Benutzernamen nicht der Zweite.

Ist es möglich, dass passiert nur mir? Mache ich etwas falsch?

Danke, Nimrod.

Answer 1

Sie tun etwas nicht falsch, aber angular2 hat eine besondere Art und Weise Änderungserkennung, die Sie hier lesen können: http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

Ihr Problem zu beheben ChangeDetectorRef in Ihrem Konstruktor injiziert und wenn das Versprechen Anruf detectChanges erfolgt aus seine Instanz. Sie müssen das nicht überall tun, sondern in "tiefen" Versprechungen wie diesen. Bitte beachten Sie, dass das Erkennen von Änderungen ein teures Manöver ist und sorgfältig verwendet werden sollte.

Answer 2

Das Problem ist, dass Ihr Versprechen außerhalb von Angular Zone ausgeführt wird, die auf Änderungen wartet. Versuchen Sie NgZone importieren, übergeben Sie es zu Ihrem Konstruktor als Parameter und Verpackung Ihr Versprechen innen:

import { NgZone } from '@angular/core'; 

Dann:

this.ngZone.run(() => { 
    //Your promise code 
});