删除 dcl-wapper angular2 中扭曲的动态分量答案

【问题标题】：removing dynamic component warped in dcl-wapper angular2删除 dcl-wapper angular2 中扭曲的动态分量
【发布时间】：2017-04-02 13:50:47
【问题描述】：

我正在使用*ngFor 和<dcl-wrapper [type]="t"></dcl-wapper> 组件在this answer 中描述的组件数组中呈现动态创建的组件

我正在尝试向组件添加一个删除按钮，以便在单击按钮时使用myCompArray.splice(index, 1) 删除组件，但它总是会删除最后一个
这是我的笨蛋http://plnkr.co/edit/4lhuHF?p=preview

【问题讨论】：

【解决方案1】：

传递索引，而不是事件。事件是null，因为没有发出任何值：

 (removed)=onRemoved(i)

您还应该注意，当删除或添加项目时，[index]=i 会更新其余元素的 @Input() index; 属性。

【讨论】：

我通过comp.instance.removed.subscribe(r => this.onRemoved(this.index));
我发现你的代码有点混乱。您将索引传递给整个应用程序，但无论如何您已经可以在需要它的地方使用它。我认为主要的困惑是（正如我已经添加到我的答案中）@Input() index; 在删除项目时由ngFor 更新。
我在控制台中写出我要删除的索引，即使我得到 0 它也会删除最后一个
它不会删除最后一个，但*ngFor 会更新index，第一项（以前是第二项）得到[index]="0"，第二项（以前是第三项）[index]="1"已分配，然后没有带有[index]="2" 的项目。
我知道索引的变化，它在数组中的位置；但看看我更新的 plunker，你会发现最初每个文本框都有不同的值，所以你可以看到当你删除中间的那个时，最后一个会脱落