Angular向子组件传数组出现[object Object]，求解决方法

问题根源 #

你在父组件HTML中使用了插值语法{{}}传递输入属性：

<app-channel-fields-list data="{{channelFields}}"></app-channel-fields-list>

这种写法会让Angular自动调用数组的toString()方法，将其转换为字符串输出。由于数组中的元素是对象，对象的toString()返回[object Object]，最终传递给子组件的就变成了字符串"[object Object]"，而非原数组。

修正步骤 #

1. 父组件HTML修改为属性绑定语法
   用方括号[]包裹输入属性，直接传递JavaScript数组引用，避免字符串转换：

   <app-channel-fields-list [data]="channelFields"></app-channel-fields-list>
   

2. 子组件HTML修正*ngFor语法
   你的*ngFor写法有误，正确语法是let hero of data（使用let声明变量，of遍历数组）：

   {{data | json}} <!-- 用json管道可直观展示数组结构 -->
   <tr *ngFor="let hero of data">
       <td>{{hero.name}}</td>
   </tr>
   

3. 子组件TS可保留原代码（可选优化类型）
   若需要类型提示，可给@Input添加类型定义：

   @Input() data: Array<{name: string, description: string}>;
   ngOnInit() {
       console.log('data', this.data); // 此时会打印真实数组对象
   }
   

效果说明 #

使用属性绑定[data]后，父组件的channelFields数组会直接传递给子组件的data输入属性，不会进行字符串转换。子组件拿到真实数组后，console.log会输出数组结构，*ngFor也能正常遍历渲染数据。

内容的提问来源于stack exchange，提问作者user17281101