角度按钮在 FormArray 中不起作用

Question

我正在尝试一个简单的表单数组，有点像待办事项列表，但是我正在向列表中的每个项目添加一个按钮以允许将其删除(尽管没有在示例中重新创建此部分(。

我发现每个项目的按钮都不是"可点击的"。我还注意到"涟漪"效果在这些按钮上也不起作用。

我已经设法创建了一个堆栈闪电战来重新创建它，因此任何帮助将不胜感激

https://stackblitz.com/edit/angular6-material-components-demo-ck2jpe

若要使用，只需在文本框中输入内容，请单击"添加"，然后尝试将其从下面出现的列表中删除

Answer 1

问题是您没有向*ngFor添加trackBy函数。这使得当您执行鼠标按下时将重新创建整个列表 DOM，因此click永远不会被触发，因为元素被销毁。

有关工作示例，请参见此处：

trackBy(idx: number, item: { id: number }): number {
return item.id;
}

模板：

<ul formArrayName="items"
*ngFor="let item of exampleForm.controls.items.value; let i = index;trackBy: trackBy">

有关更多信息，您可以阅读我关于此主题的回答。基本上，发生的情况是exampleForm.controls.items.value引用随着发生的每个事件而变化。

---

另一种解决方案可能是在组件声明中使用changeDetection: ChangeDetectionStrategy.OnPush。我建议您同时使用trackBy和OnPush以获得最大的性能改进。但请注意，这可能需要在当前应用程序代码中进行一些重构。

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush
})

叠