Wie kann ich auf diese Variable zugreifen? this.hero

Question

Also ging ich durch die Dokumentation auf der Angular Website, und ich baute die grundlegende "Heroes" App.

Ich habe versucht, auf den Variablenhelden der Eingabe zuzugreifen, da ich eine bestimmte Variable habe, die ich ausgeben möchte, aber ich bekomme Fehler.

Error: Uncaught (in promise): TypeError: this.hero is undefined 

Dieser Aufruf funktioniert in jedem anderen Verfahren, zum Beispiel ein Verfahren, das bei den Tasten Verwendung genannt wird, aber wenn ich versuche, es in ngOnInit() aufzurufen, es stürzt ab und gibt mir, dass Fehler.

Hier ist mein Code:

this.route.params.switchMap((params: Params) => this.heroService.getHero(+params['id'])).subscribe(hero => this.hero = hero); 
console.log(this.hero.background); 

wo Hintergrund ein Attribut des Helden ist.

Ich brauche keinen spezifischen Code - das war nur etwas, das nicht im Tutorial behandelt wurde und ich hätte gerne eine Richtung.

Ich habe viele Stunden damit verbracht, zu suchen, aber ich werde immer erfolglos bleiben - jetzt, bevor ich alle meine hört, kann jemand mir eine Führung geben?

Got für Code gefragt so ist es hier ist

import { Component, Input, OnInit } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 
import { Location }     from '@angular/common'; 

import { HeroService } from './hero.service'; 
import { Hero } from './hero'; 

import 'rxjs/add/operator/switchMap'; 

let body = document.getElementsByTagName('body')[0]; 
@Component({ 
    selector: 'hero-detail', 
    templateUrl: './hero-detail.component.html', 
    styleUrls: [ './hero-detail.component.css' ] 
}) 


export class HeroDetailComponent implements OnInit { 
    @Input() hero: Hero; 
    constructor(
    private heroService: HeroService, 
    private route: ActivatedRoute, 
    private location: Location 
) { } 

    oldBody:string = body.style.backgroundImage; 

    ngOnInit(): void { 
    this.route.params.switchMap((params: Params) => this.heroService.getHero(+params['id'])).subscribe(hero => this.hero = hero); 

    console.log(this.hero.background); 
    } 

    ngOnDestroy() { 
     body.style.backgroundImage = this.oldBody; 
    } 

    goBack(): void { 
    this.location.back(); 
    } 

    updateBackground(): void { 
    body.style.backgroundImage = "url('"+this.hero.background+ "')"; 
    } 

    save(): void { 
    this.heroService.update(this.hero) 
    .then(() => this.goBack()); 
    } 
} 

Answer 1

Das Problem ist, dass Ihre console.log ausgeführt wird, bevor das beobachtbare Abonnement eine Chance hat zu feuern. Das Feld 'Held' ist nicht definiert, bis der Rückruf des Abonnements tatsächlich ausgeführt wird.

Sie sollten das Konsolenprotokoll in das Abonnement wie folgt bewegen:

this.route.params.switchMap((params: Params) => 
    this.heroService.getHero(+params['id']) 
).subscribe(hero => { 
    this.hero = hero; 
    console.log(this.hero.background); 
}); 

Answer 2

bieten Sie tatsächlich einen Helden als Input() wenn Sie die Komponente verwenden ?? Wenn nicht, sollten Sie den Code nur lesen:

export class HeroDetailComponent implements OnInit { 
    public hero: Hero 
// rest of your code 

Answer 3

Da Sie hero als Input Ihrer Komponente definieren, und Sie können wie unten, um es direkt von Ihrem Parent gesetzt:

<hero-detail [hero]="selectedHero"></hero-detail> // here selectedHero is what you selected from ParenComponent 

und nach Der Fehler (this.hero is undefined) Sie konfrontiert sind, haben Sie nicht die oben genannte Sache, so dass die @Input() hero ist immer noch undefiniert, bis Sie Daten von this.heroService.getHero zurückbekommen haben.

So einfach müssen Sie die console.log auf die subscribe von this.heroService.getHero verschieben, weil es ein asynchroner Anruf ist.