angular - 虚拟列表中的反应式表单行为不稳定

Question

我正在检查带有反应形式的虚拟滚动列表。场景是我有数千行显示在一个带有复选框的列表中以批准或反对。

所以在虚拟列表中我正在生成表单组[formGroupName]="i"。

但是，如果我选中一个复选框，则在滚动它时也会随机选择并选中其他复选框。

这真的很奇怪。

闪电战可以在这里看到 任何建议或提示都会有所帮助。谢谢

要重现此问题，您可以一直向下滚动到最后一项并将其标记为取消选中，然后滚动回顶部并再次向下滚动。您将看到不稳定的行为，它将再次标记为已检查。点击中间或顶部的任何一个，其他的也会被随机检查。

Answer 1

所以对我来说可能有两个已知的修复方法。

1. 使用外部索引。在我的例子中，我在名为“index”的表单组内添加了一个新的表单控件，并将递增的值添加到每个表单组。然后我将其用作 [formGroupName]="item.controls.index.value" 并将其用作访问值的索引。

2. 其他解决方法是使用 [formGroup]="item" 而不是 [formGroupName]="i"。该解决方案在 Angular Material 存储库中提供。

Answer 2

我能够通过从 API 请求中获取有效负载来管理它，其中包括每个项目的索引号。

虚拟滚动在预先输入的同时更改页面上过滤项目的索引。这导致问题捕获页面上单击了哪个元素。

i我没有使用作为元素的索引，而是使用了包含每个项目的索引号的有效负载。