Angular 5动态添加&删除组件实例

时间:2018-04-28 03:57:00

标签: javascript angular angular5

我尝试创建一个看起来像电子表格的表格,每个td内都有可编辑的输入。我按照here解释使用Angular的ComponentFactoryResolver,在用户点击添加按钮时向表中添加一行。

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

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

我遇到以下问题:

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

1 个答案:

答案 0 :(得分:3)

这就是我的建议。您可以在父(表)组件中创建行对象列表,并使用* ngFor将其循环。

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

请查看this