Angular2 - ASYNCデータを子コンポーネントに渡します。

Question

子コンポーネントに非同期データを渡す際に問題があります。私は動的フォームジェネレータを作成しようとしています。 Observable経由でjsonを呼び出して子コンポーネントに渡すと、問題が発生します。

サービス：

generateSearchFields2(): Observable<any> { 
     return this.http 
      .get(this.API + 'searchFields') 
      .map((res:Response) => { 
       res.json().data as any; 
       for (var i = 0; i < res.json().data.length; i++) { 
        var searchField = res.json().data[i]; 
        switch (searchField.component) { 
         case "TextboxQuestion": 

          let TXQ: TextboxQuestion = new TextboxQuestion({ 
           key: searchField.key, 
           label: searchField.label, 
           value: searchField.value, 
           required: searchField.required, 
           order: searchField.order 
          }); 
          this.searchFieldModels.push(TXQ); 
          console.log("TXQ: ", TXQ, this.searchFieldModels); 
          break; 
         case "DropdownQuestion": 

          let DDQ: DropdownQuestion = new DropdownQuestion({ 
           key: searchField.key, 
           label: searchField.label, 
           required: searchField.required, 
           options: searchField.options, 
           order: searchField.order 
          }); 
          this.searchFieldModels.push(DDQ); 
          console.log("TXQ: ", DDQ, this.searchFieldModels); 
          break; 
         default: 
          alert("DEFAULT"); 
          break; 
        } 
       } 
       return this.searchFieldModels.sort((a, b) => a.order - b.order); 
      }) 
      .catch(this.handleError); 
    } 

コンポーネントの親：

generateSearchFields2() { 
    this.service.generateSearchFields2() 
     .subscribe(res => this.searchFields = res) 
    } 

子供に親テンプレートに入力ディレクティブで変数を渡してはIAM：[searchFields]="searchFields"

問題がsearchFieldが未定義た子コンポーネントであります値。この子では、別のサービスに値を渡してformControsを作成しますが、そこにも定義されていません。 parentから来dataがまだバインドされていないngOnInit場合には、その間

Answer 1

緩いデータを、私は非同期変数を渡すことができますどのようにヒントを

@Input() searchFields: SearchBase<any>[] = []; 

ngOnInit() { 
    this.form = this.qcs.toFormGroup(this.searchFields); 
    console.log("ONINIT DYNAMIC FORM COMPONENT: ", this.searchFields); 

    } 

してくださいしない：欠落しているデータが子供に、ここから始まります。したがって、searchFieldsはまだundefinedです。 NgAfterViewInitコンポーネントのライフサイクルイベントで使用できます。他の例については

@Input() searchFields: SearchBase<any>[] = []; 

ngAfterViewInit() { 
    this.form = this.qcs.toFormGroup(this.searchFields); 
    console.log("ONINIT DYNAMIC FORM COMPONENT: ", this.searchFields); 
} 

あなたはAngular2 Component Lifecycle events

Answer 2

を見ることができ、あなたはまた、入力が更新されるたびに呼び出されるngOnChanges()を使用することができますが、@Input() searchFieldsセッター

private _searchFields: SearchBase<any>[] = []; 
@Input() set searchFields(value SearchBase<any>[]) { 
    if(value != null) { 
    this.form = this.qcs.toFormGroup(this.searchFields); 
    console.log("ONINIT DYNAMIC FORM COMPONENT: ", this.searchFields); 
    } 
} 

get searchFields() : SearchBase<any>[] { 
    return this.searchFields; 
} 

を作ることができますsetterは通常、実行されたコードが設定されている複数の入力に依存する場合を除いて、より便利です。