javascript - Angular 5 动态添加和删除组件实例

Question

我正在尝试创建一个看起来像电子表格的表格，其中每个td. 我正在使用 Angular 的ComponentFactoryResolver解释here，当用户单击添加按钮时向表中添加一行。

添加行后，我EventEmitter会在最后一列值更改时发出该行的所有数据。

我试图在这个 StackBlitz上重新实现相同的功能。

我有以下问题：

1. 我无法从新添加的组件中发出数据。（检查控制台）
2. 添加新行后，第一行（非动态）也停止给我发出的数据。
3. 如果用户不需要它，我不确定如何删除一行，因为我没有对它的引用。

标签： javascriptangularangular5

Answer 1

这就是我的建议。您可以在父（表）组件中创建行对象列表并使用 *ngFor 循环它。

<app-row 
   *ngFor="let row of rowList" 
   [row]="row" 
   (entryUpdate)="onEntryUpdated($event)">
</app-row>

请看看这个