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

Question

正在实现动态表单，父组件获取后台表的列属性信息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传入则不会报错，这是否和异步获取数据有关，求解决方法

Answer 1

JoJo 2017-06-30 10:09:16

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

• 提问者 cs88du #1

  在父组件中调用<modal [display]="display" [fields]="fields"></modal>，fields为异步获取的列属性，在modal子组件中，又引入了子组件<dynamic-form [controls]="controls"> </dynamic-form>，用于动态生成表单，这里这个controls需要根据传入的fields动态生成相应的控件，在这个组件中始终无法使用fields。不知如何处理

• 提问者 cs88du #2

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