Передача массива объектов из углового шаблона в другой компонент с помощью @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 и выглядит следующим образом

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