虚拟列表中的反应形式行为不稳定

Question

我正在用反应形式检查虚拟滚动列表。场景是我要显示数千行 在带有复选框的列表中，该复选框可以批准或拒绝。

因此在虚拟列表中，我正在使用[formGroupName]="i"生成表单组。

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

这真的很奇怪。

可以看到

Blitz here 任何建议或技巧都将有所帮助。谢谢

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

Answer 1

因此，可能有两个已知的修复程序。

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

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

Answer 2

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

虚拟滚动在输入时同时更改了页面上已过滤项目的索引。这就是导致该问题导致无法捕获页面上单击哪个元素的原因。

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