Angular 2 mit TypeScript: Die Ansicht wird nicht aktualisiert, nachdem die Variable im Antworthandler gesetzt wurde.

Question

Ich bin auf ein Problem mit Angular 2 gestoßen, das TypeScript verwendet, auf das ich zusätzliche Augen anwenden kann. Ich fordere ein Token von einer API, die gut funktioniert. In meinem Antworthandler überprüfe ich auf grundlegende Fehler und zeige sie den Endbenutzern an. Wenn ich den Fehler und meine Nachricht von der Konsole auslogge, wird sie korrekt angezeigt, aber die Ansicht/Vorlage wird nicht aktualisiert.

In meiner Klasse habe ich folgendes:

public message: string; 

In meinem Konstruktor Ich habe:

constructor() { 
    this.message = 'Message to enduser'; 
} 

Meine beiden Methoden sind die folgenden:

myRequest() { 
    (<any>window).privateAPI.getToken({ 
     token: this.tmpData.token 
    }, this.responseHandler); 
    return false; 
} 

responseHandler(response: any) { 
    setTimeout(function() { 
     if (response.error) { 
      // this.message update is not updating in the template 
      this.message = response.error.message; 
      console.log('error: ', this.message); 
     } else { 
      // success 
     } 
    }, 100); 
} 

Jede Hilfe würde sehr geschätzt werden.

Answer 1

ich in der Lage war, dieses Problem zu lösen, indem ngZone verwendet. Im Folgenden wird das Problem gelöst, dass meine Komponente meine Vorlage in der API-Antwort nicht aktualisiert.

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

// pass NgZone to constructor 
constructor(private _zone: NgZone) { 
    this.message = 'Message to enduser'; 
} 


requestToken() { 
    (<any>window).privateAPI.getToken({ 
    token: this.tmpData.token 
    }, (status: number, response: any) => { 
     this._zone.run(() => { 
      if (response.error) { 
       this.message = response.error.message; 
      } else { 
       // good to go 
      } 
     }); 
    }); 
} 

Answer 2

Dies liegt daran, dass Sie innerhalb von setTimeout einen neuen Kontext erstellt haben. Das Schlüsselwort function erledigt dies automatisch. In TypeScript können Sie lambdas (unter Lambdas und mit diesem verwenden), auch arrow-functions genannt. Wenn Sie ein Lambda verwenden, erfasst es automatisch das, das verfügbar ist, wenn die Funktion erstellt wird, und nicht wenn es aufgerufen wird.

Try this:

setTimeout(() => { 
    if (response.error) { 
     // this.message update is not updating in the template 
     this.message = response.error.message; 
     console.log('error: ', this.message); 
    } else { 
     // success 
    } 
}, 100);