bind var zu html so ändert sich nach async subscribe Anruf

Question

Ich arbeite an einer Seite, die Diagramme aber nicht mein ui von meinem Json aktualisieren, so habe ich das Problem vereinfacht -> ändern Sie meine var 'Titel' in der Benutzeroberfläche nach asynchroner Anruf

Wie aktualisiere ich ein gebundenes HTML-Element/ts var {{title}}, nachdem ein Subskriptionsdienst von einem asynchronen Aufruf zurückkehrt?

Mein Code ist wie folgt

import { Component, NgZone } from '@angular/core'; 
import { HttpWebServiceService1 } from './http-web-service-service'; 
import { Chart } from './bar-chart-demo/chartModel'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [HttpWebServiceService1] 
}) 
export class AppComponent { 
    title:string; 

    constructor(HttpWebServiceService1: HttpWebServiceService1){ 
    this.title = 'see this'; 
    HttpWebServiceService1.getHTTP() 
     .subscribe(
     charts => 
     { 
      this.title="now this";  
     }, 
    ); 

} 
} 

Mein html ist

<div class="flex-container-header" 
    fxLayout="row" 
    fxLayoutAlign="space-between center"> 
    <div class="flex-item" fxFlex=10> 
    <img src="../../assets/img/ami_logo1.png" ng-href="www.mysite.ie" > 
    </div> 
</div> 
'<h1> {{title}} </h1>' 
</div> 

Answer 1

Um Änderungserkennung auszulösen manuell können Sie den ChangeDetectorRef Provider verwenden.

constructor(private ref: ChangeDetectorRef){} //<-- inject in constructor 
//later use like this: 
this.ref.detectChanges(); 

Dokumentation: https://angular.io/docs/ts/latest/api/core/index/ChangeDetectorRef-class.html