어떻게이 변수에 액세스 할 수 있습니까? this.hero

Question

그래서 Angular 웹 사이트의 문서를 살펴보고 기본 "영웅"앱을 만들었습니다.

출력 변수를 갖고 있기 때문에 입력 변수 영웅에 액세스하려고 시도했지만 오류가 발생합니다.

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

이 호출은 내가 충돌과 나에게 그 오류를 제공) (ngOnInit에 전화를 시도하지만 일단, 예를 들어, 다른 방법으로 버튼을 사용하는 동안 호출되는 방법을 사용할 수 있습니다.

여기 내 코드입니다 : 배경 영웅의 속성

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

.

특정 코드가 필요하지 않습니다.이 코드는 튜토리얼에서 다루지 않았으며 어떤 방향을 원합니다.

나는 많은 시간을 들여 검색했지만 항상 실패로 끝납니다. 이제는 내 모든 청력을 찢기 전에 누군가가 나에게 약간의 지침을 줄 수 있습니까?

당함가

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

관찰 가능한 구독이 실행되기 전에 console.log가 실행되는 것이 문제입니다. 'hero'필드는 구독 콜백이 실제로 실행될 때까지 정의되지 않습니다.

이 같은 가입에 콘솔 로그를 이동해야합니다

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

Answer 2

구성 요소를 사용할 때 실제로 Input()로 영웅을 제공하는 것입니다, 그래서 여기에 코드를 요청? 당신이 당신의 구성 요소의 Input으로 hero를 정의하고 있기 때문에

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

Answer 3

, 당신은 아래처럼 parentComponent에에서 직접 설정 할 수 있습니다 : 그렇게하지 않으면, 여러분의 코드는 바로 읽어야

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

과에 따라 당신이 직면하고있는 오류 (this.hero is undefined), 당신은 위의 일을하지 않았기 때문에 this.heroService.getHero에서 데이터를 얻을 때까지 @Input() hero은 아직 정의되지 않았습니다.

비동기 호출이기 때문에 console.log을 subscribethis.heroService.getHero으로 옮기기 만하면됩니다.