javascript - 使用 @input 将对象数组从 Angular 模板传递到另一个组件

Question

我试图通过 Angular 模板将一组对象从一个组件传递到另一个组件。

 <div *ngFor="let item of data">
    <div class="col-xl-3">
      <top-users  usersData ={{[item]}}> </top-users>
    </div>
  </div>

这里的项目应该是

[{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}]

数据是对象数组的数组

[    
 [{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}],
 [{id:3, name: 'Ahmed'}, {id:4, name:'Mohammed'}],
 [{id:5, name: 'Ahmed'}, {id:6, name:'Mohammed'}]
]

当我通过@input参数接收变量时，我得到结果typeof string，如下所示

[object Object],[object Object]

我尝试解析Json并给出了这个错误

ERROR SyntaxError: Unexpected token o in JSON at position 1

我应该怎么做才能获得正确的对象数组？

Answer 1

您需要传递如下数据:

<div *ngFor="let item of data">
    <div class="col-xl-3">
      <top-users  [usersData]="item"> </top-users>
    </div>
  </div>

您将在子组件中收到:

@Input() usersData;

usersData 将如下所示:

[{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}]