以角度将对象传递给子组件

Question

我有一个类似这样的ngFor指令：

<div *ngFor="let data of datas|slice:0:2"><app-data [data]="data"></app-data></div>

但是数据对象不会从包含的div传递到app-data组件。

如何将div中的数据传递给app- data？

Answer 1

父组件

您可以简单地使用

例如，我有这样的父组件

<div *ngFor="let data of datas|slice:0:2">
    <app-child [data]="data"></app-child>
</div>

TS

我有一个虚数组

 datas = [
    {id: 1, name: 'ABC'},
    {id: 2, name: 'EFG'}
  ];

子组件

现在您可以使用这个数组来对子组件进行，如下所示

HTML

<ul>
    <li>{{data.id}}</li>
    <li>{{data.name}}</li>     
</ul>

TS

// This will bring data from parent component and this is used for sharing data between parent context and child directives or components
@Input() data;

ngOnInit() {
  console.log('data => ', this.data);
}

在我的示例中，您可以查看Here