angularjs 如何以Angular 将阵列传递给子构件

mnowg1ta 于 2022-12-26 发布在 Angular

关注(0)|答案(1)|浏览(116)

所以我可以将字符串传递给子组件，但是当我尝试传递数组时，我得到的是[object Object]作为字符串参数。
不知道为什么会这样！

父组件html：

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

其中通道字段为

const channelFields =[ { "name": "first_name", "description": "first name" } ]

子组件html：

{{data}}

<tr *ngFor=" hero in data">
    <td>{{hero.name}}</td>
</tr>

子组件ts：

@Input() data;
  ngOnInit() {
      console.log('data', this.data);  // this also prints [object Object], which is weird
  }

所以，不是很确定问题是什么，因为它可以完美地传递字符串，但不能传递数组！
下面是一段YouTube视频，上面有它的真实样子：https://www.youtube.com/watch?v=1gsmnoVhEig
我发现了一个类似的问题：Angular passing array from parent to child component
但我无法让这该死的东西工作。

1条答案

你得到的错误是因为它试图将对象插入到一个字符串中，因为父声明中的大括号int。

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

这将允许数组被传递给子组件-然后你可以在你正在做的时候迭代它。另外- minor thing = t你不需要在对象键周围加上引号。

const channelFields =[ { name: "first_name", description: "my description" } ]

此外，当使用 *ngFor进行迭代时，应使用

<tr *ngFor="let hero of data">
    <td>{{hero.name}}</td>
</tr>