使用@input 将对象数组从角度模板传递到另一个组件

Question

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

 <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'}]