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通過父模板中的INPUT指令將變量傳遞給子： [searchFields]="searchFields"

問題在子組件中，其中searchField具有未定義的值。 在這個孩子中，我將值傳遞給另一個服務，以創建formContros，但我也未定義。 數據缺失從這里開始，在孩子：

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

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

  }

請提示我如何能夠傳遞異步變量，同時不會丟失數據

Answer 1

您可以將@Input() searchFields設置為setter

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;
}

您還可以使用每次更新輸入時調用的ngOnChanges（） ，但設置器通常更方便，除非執行的代碼依賴於所設置的多個輸入。

Answer 2

在ngOnInit事件中，來自parent的data尚未綁定。 所以你的searchFields尚未undefined 。 您可以在NgAfterViewInit組件生命周期事件中使用它。

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

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

對於其他情況，您可以看到Angular2組件生命周期事件