Angular2 - 将 ASYNC 数据传递给子组件
Posted
技术标签:
【中文标题】Angular2 - 将 ASYNC 数据传递给子组件【英文标题】:Angular2 - pass ASYNC data to child component 【发布时间】:2017-06-01 05:25:40 【问题描述】:我遇到了将异步数据传递给子组件的问题。我试图编写动态表单生成器。当我尝试通过 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)
我通过父模板中的 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);
请提示我如何传递异步变量,同时不丢失数据
【问题讨论】:
【参考方案1】:您可以让@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;
您也可以使用ngOnChanges(),每次更新输入时都会调用它,但设置器通常更方便,除非执行的代码依赖于设置的多个输入。
【讨论】:
你能解释一下setter和ngOnChanges()的区别吗?【参考方案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 Component Lifecycle events
【讨论】:
以上是关于Angular2 - 将 ASYNC 数据传递给子组件的主要内容,如果未能解决你的问题,请参考以下文章
使用 ngOnChanges 将异步数据传递给子组件不起作用
如何将数据传递给子 UINavigationController?