Angular2のデータを子コンポーネントに渡す

Question

こんにちは私は、親コンポーネントから子コンポーネントコントローラにデータを渡すのに少し問題があります。私の親のコンポーネント。これによりparent.component.html

<element [mydata]="Value"></element> 

のマークアップコードザッツ

私は値とMYDATAを設定します。私は私の子供のコントローラ

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'element', 
    templateUrl: './element.component.html', 
    styleUrls: ['./element.component.scss'], 
}) 

export class ElementComponent implements OnInit { 

    @Input() public mydata:string; 

    ngOnInit() { 
     console.log(this.mydata); 
    } 
} 

で@Inputを使用してこの値を設定

私はコンソールに未定義を得るが、なぜですか？

Answer 1

あなたが（それはまだ初期化されていないです）コンストラクタで@Inputデータにアクセスすることはできません、あなたはのOnInitインターフェイスを実装する必要があります。

import { OnInit } from "@angular/core"; 

export class My implements OnInit { 
    ... 

    ngOnInit() { 
     console.log(this.mydata); 
    } 

} 

Answer 2

おそらく、非同期の問題、それはあなたがJSONからデータを取得しているようだとして、おそらくhttpや何かを介して取得されます。定義されていないのは、データが実際に取得される前にそのビューがレンダリングされ、未定義のエラーがスローされるためです。

<element *ngIf="value" [mydata]="value"></element> 

そして、あなたはすなわち、他の回答から示唆されている現在の設定維持：

を

は、それが実際の値を持つまで、子コンポーネントがレンダリングされないことを、条件を設定してください

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'element', 
    templateUrl: './element.component.html', 
    styleUrls: ['./element.component.scss'], 
}) 


export class ElementComponent implements OnInit { 

@Input() public mydata:string; 

    ngOnInit() { 
    console.log(this.mydata); 
    } 
}