HTTP Observable subscribe Arbeiten in der Komponente, löst aber Fehler 'undefiniert' in der Vorlage (Angular2 + TS)

Question

Ich habe einen Fehler, der mir ein bisschen mysteriös erscheint. Vielleicht können einige neue Augenpaare meinen Fehler erkennen!

Ich habe Detail-Komponente und eine Liste-Komponente, auf die ich Daten vom Server abrufen. Meine Listen-Komponente funktioniert wie ein Zauber, aber ich habe Probleme mit der Detail-Komponente. Die Daten vom Server sind korrekt, aber wenn ich versuche, sie im Browser zu drucken, gibt es mir einen undefinierten Fehler (Name kann nicht undefiniert sein). Alles funktioniert gut in der ngOnInit-Methode und es protokolliert meine Daten wie erwartet auf der Konsole. Hier ist der relevante Teil meines Code aus der Detail-Komponente:

export class HeroDetailComponent implements OnInit { 

    @Input() hero: Hero; //also tried without the input in front of hero 

    constructor(public _routeParams: RouteParams, public _service: Service) { 

    } 

    ngOnInit() { 
     let id = this._routeParams.get('id'); 
     this._service.getById(id) 

      .subscribe(hero => { 
       this.hero = hero; 
       console.log("hero: ", this.hero); //the correct data is logged! 
      });  
    } 
} 

Und in der Vorlage:

<h1>Hero: {{hero.name}}</h1> 

Als Referenz des gleiche entsprechende Code in der Liste Komponenten, die alle Helden Listen und funktioniert perfekt.

export class HeroListComponent implements OnInit { 
    name: string; 
    id: string; 
    date: string; 
    heroes: Array<Hero>; 

    constructor(public _service: Service, public _router: Router) { 

    } 

    ngOnInit() { 
     this.getHeroes(); 
    } 

    getHeroes() { 
     this._service.getHeroes() 
      .subscribe(heroes => this.heroes = heroes); 
    } 
} 

Vorlage:

<table> 
    <tr *ngFor="let hero of heroes" > 
    <td>{{hero.name}}</td> 
    </tr> 
</table> 

Ich kann es wirklich nicht erkennen, was in meiner Detail-Komponente falsch ??? Vielen Dank im Voraus für jede Hilfe!

Answer 1

Ich würde den elvis verwendet habe Betreiber in diesen Situationen (?): Änderung {{hero.name}}-{{hero?.name}} so, als Held verfügbar ist, wird es das Ergebnis an die Vorlage druckt

Answer 2

Haben Sie versucht?

<h1 *ngIf="hero">Hero: {{hero.name}}</h1>