父组件异步获取数组通过@Input传入到子组件，在子组件中无法使用

来源：6-2 输入属性

cs88du

2017-06-30

正在实现动态表单，父组件获取后台表的列属性信息fields，传递给dynamic-form子组件，用于动态生成相关控件信息。子组件模板文件中可以通过ngFor遍历生成表单样式，但在类文件中，无法读取fields的值来生成formGroup。按照网友的方法在组件中使用如下方法：

@Input()

set fields(fields: Field[]){

this._fields = fields;

this._fields.forEach(field => {

console.log(field.key);

})

}

get fields(){

return this._fields;

}

虽然值能打印在控制台上，但是报出如下错误：DictComponent.html:11 ERROR TypeError: Cannot read property 'forEach' of undefined。

如果在父组件中直接new一个fields传入则不会报错，这是否和异步获取数据有关，求解决方法

写回答

1回答

JoJo

2017-06-30

没看到全部代码，按我的理解说下，我觉得你应该在ngChange这个钩子里去执行这个forEach循环。而不是在set方法里，因为父组件没获取到信息之前，set的值是空的，所以会报你这个错误。

cs88du

动态表单生成，参照的这个例子实现的：https://angular.io/guide/dynamic-form

2017-06-30

共2条回复

Angular4.0从入门到实战打造股票管理网站

Angular新特性，教你熟练使用 Angular 和 Typescript 开发组件式单页应用

2683 学习 · 1361 问题

相似问题

回答 2

回答 1

回答 3

回答 1

回答 2