@Init의 Angular 2에서 입력 속성이 정의되지 않았습니다.

@Init의 Angular 2에서 입력 속성이 정의되지 않았습니다.

구성 요소의 정보를 얻는 중@Input에 가치가 있는.constructor또는ngOnInit하지만 그것은 다음과 같이 오고 있습니다.undefined시종일관

나는 영웅 플런커를 업데이트했습니다.console.log문제를 표시합니다(각도가 높음).http://plnkr.co/edit/dseNM7OTFi1VNG2Z4Oj5?p=preview

export class HeroDetailComponent implements OnInit {
  constructor(){
    console.log('hero', this.hero)
  }
  public hero: Hero;
  
  ngOnInit() {
    console.log('hero', this.hero)
  }
}

내가 여기서 뭘 잘못하고 있는 거지?

당신이 정의되지 않는 이유는ngOnInit구성 요소가 초기화된 시점에서 실제로 전달되지 않았기 때문입니다.Hero물건

<my-hero-detail [hero]="selectedHero"></my-hero-detail>

이 시점에서selectedHero당신의 가치가 없습니다.AppComponent그리고 목록의 클릭 이벤트가 호출하기 전까지는 그렇지 않습니다.onSelect방법

편집: 제가 실제로 해결책을 제공하지 않았다는 것을 알게 되어 죄송합니다.추가할 경우ngIf로.my-hero-detail

<my-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></my-hero-detail>

이로 인해 시스템 초기화가 지연될 경우my-hero-detail콘솔 출력이 표시됩니다.그러나 선택한 영웅이 변경되면 다시 출력되지 않습니다.

이는 영웅이 비동기식으로 로드되므로 보기가 처음 렌더링될 때 선택한 영웅이 정의되지 않기 때문입니다.그러나 선택한 후에는 정의된 값으로 세부 정보 보기에 영웅이 전달됩니다.

기본적으로 원래 값(정의되지 않음)을 기반으로 한 onInit 호출이 표시됩니다.

각 선택 후 유사한 작업을 실행하려면 다음과 같이 수정할 수 있습니다.

export class HeroDetailComponent implements AfterViewChecked {
  constructor(){
    console.log('hero', this.hero)
  }
  public hero: Hero;

  ngAfterViewChecked() {
    console.log('hero', this.hero)
  }
}

입력 속성 값이 정의되지 않은 경우에도 동일한 동작이 발생했습니다.ngOnInit진술서*ngIf="selectedHero"html 코드에 만족하지 못했습니다.게다가, 사용하는 것.AfterViewChecked@THG의 대답은 저에게 좋은 해결책이 아니었습니다. 왜냐하면 그것은 주기적으로 전화를 하고 또한 경고를 일으키기 때문입니다.ExpressionChangedAfterItHasBeenCheckedError변수를 변경하고 싶을 때(해결 방법을 사용하고 싶지 않았습니다)setTimeout) 이것이 이 문제에 대한 저의 해결책입니다.

export class MyComponent implements OnChanges {
    @Input() myVariable: any;

    ngOnChanges(changes: SimpleChanges) {
        if (changes['myVariable']) {
            let variableChange = changes['myVariable'];
            //do something with variableChange.currentValue
        }
    }
}

나중에 누군가에게 도움이 되었으면 좋겠습니다.

ngOninit 방법 사용에서,

ngOnInit() {
    if(this.hero) 
        console.log('hero', this.hero);
}

@저의 경우 바라바스 솔루션이 작동하지 않았습니다.나는 이것을 사용하게 됩니다.

export class HeroDetailComponent implements OnChanges {
    @Input() hero: any;

    ngOnChanges(changes: SimpleChanges){
        if(changes.hero && changes.hero.currentValue){
            let currentHero = changes.hero.currentValue;
            //use currentHero
        }
    }
}

언급URL : https://stackoverflow.com/questions/34396684/input-property-is-undefined-in-angular-2s-oninit