虚拟列表中的反应式表单行为不稳定答案

【问题标题】：Reactive forms inside virtual list behave erratic虚拟列表中的反应式表单行为不稳定
【发布时间】：2019-10-25 20:45:52
【问题描述】：

我正在使用响应式表单检查虚拟滚动列表。场景是我有数千行要显示在带有复选框的列表中批准或反对。

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

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

这真的很奇怪。

Blitz可以看到here 任何建议或提示都会有所帮助。谢谢

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

【问题讨论】：

请考虑创建Minimal Sample StackBlitz 复制您的问题。
@SiddAjmera 你是对的。刚刚添加了 stackblitz 供您查看。要重现，您可以一直向下滚动到最后一项并将其标记为取消选中，然后滚动回顶部并再次向下滚动。你会看到不稳定的行为。它将再次标记为选中。点击中间或顶部的任何一个，其他的也会被选中
上帝。刚检查。这对我来说似乎是一个错误。很棒的发现。我认为你应该举报。
我做到了，就像任何其他开源回购所有者一样，这对他们来说根本不像是一个“错误”：D。
能否分享您提出的错误的链接？

【解决方案1】：

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

使用外部索引。在我的例子中，我在名为“index”的表单组内添加了一个新的表单控件，并将递增的值添加到每个表单组。然后我将其用作 [formGroupName]="item.controls.index.value" 并将其用作访问值的索引。
其他解决方法是使用 [formGroup]="item" 而不是 [formGroupName]="i"。该解决方案在 Angular Material 存储库中提供。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：