虚拟列表中的反应形式表现不稳定
Reactive forms inside virtual list behave erratic
我正在检查具有反应形式的虚拟滚动列表。场景是我有数千行要显示
在带有要批准或反对的复选框的列表中。
所以在虚拟列表中，我正在生成带有 [formGroupName]="i" 的表单组。
但是如果我选中一个复选框，在滚动时它会随机选中并选中其他复选框。
这真的很奇怪。
Blitz can be seen here
任何建议或提示都会有所帮助。谢谢
要重现此问题，您可以一直向下滚动到最后一项并将其标记为取消选中，然后滚动回到顶部并再次向下滚动。你会看到不稳定的行为，它将再次被标记为已检查。点击中间或顶部的任何一个，其他的也会被随机选中。
所以我可能有两个已知的修复方法。
使用外部索引。在我的例子中，我在名为 'index' 的表单组中添加了一个新的表单控件，并将增量值添加到每个表单组。然后我将其用作 [formGroupName]="item.controls.index.value" 并将其用作访问值的索引。
其他解决方法是使用 [formGroup]="item" 而不是 [formGroupName]="i"。 Angular Material 存储库中提供了此解决方案。
我能够通过从 API 请求中获取有效载荷来管理它，其中包括每个项目的索引号。
虚拟滚动在输入时同时更改页面上过滤项目的索引。这导致问题无法捕获在页面上单击了哪个元素。
我没有使用 i 作为元素的索引，而是使用了包含每个项目索引号的有效载荷。
我正在检查具有反应形式的虚拟滚动列表。场景是我有数千行要显示 在带有要批准或反对的复选框的列表中。
所以在虚拟列表中，我正在生成带有 [formGroupName]="i" 的表单组。
但是如果我选中一个复选框，在滚动时它会随机选中并选中其他复选框。
这真的很奇怪。
Blitz can be seen here 任何建议或提示都会有所帮助。谢谢
要重现此问题，您可以一直向下滚动到最后一项并将其标记为取消选中，然后滚动回到顶部并再次向下滚动。你会看到不稳定的行为，它将再次被标记为已检查。点击中间或顶部的任何一个，其他的也会被随机选中。
所以我可能有两个已知的修复方法。
使用外部索引。在我的例子中，我在名为 'index' 的表单组中添加了一个新的表单控件，并将增量值添加到每个表单组。然后我将其用作 [formGroupName]="item.controls.index.value" 并将其用作访问值的索引。
其他解决方法是使用 [formGroup]="item" 而不是 [formGroupName]="i"。 Angular Material 存储库中提供了此解决方案。
我能够通过从 API 请求中获取有效载荷来管理它，其中包括每个项目的索引号。
虚拟滚动在输入时同时更改页面上过滤项目的索引。这导致问题无法捕获在页面上单击了哪个元素。
我没有使用 i 作为元素的索引，而是使用了包含每个项目索引号的有效载荷。