Реактивные формы внутри виртуального списка ведут себя странно

Question

Я проверял виртуальный список прокрутки с помощью реактивных форм. Сценарий состоит в том, что у меня есть тысячи строк для отображения в списке с флажками для утверждения или опровержения.

Так что внутри виртуального списка я создаю группу форм с [formGroupName]="i",

Но если я отмечаю один флажок, то при прокрутке он случайным образом выбирает и проверяет другие флажки.

Это действительно странно.

Блиц можно посмотреть здесь. Любые советы или подсказки были бы полезны. Спасибо

Чтобы воспроизвести эту проблему, вы можете прокрутить весь путь до последнего элемента, отметить его, снять флажок, а затем прокрутить вверх и снова вернуться вниз. Вы увидите ошибочное поведение, оно будет помечено как проверенное снова. А при нажатии любой в середине или вверху, другие будут проверены также в случайном порядке.

Answer 1

Таким образом, есть два возможных исправления для меня.

1. Используйте внешний индекс. В моем случае я добавил новый элемент управления формы внутри группы форм с именем "index" и добавил увеличенное значение к каждой группе форм. Затем я использовал это как [formGroupName]="item.controls.index.value" и использую это как индекс для доступа к значениям.

2. Другим обходным решением является использование [formGroup]="item" вместо [formGroupName]="i". Это решение было предоставлено в хранилище Angular Material.

Answer 2

Я смог справиться с этим, получив полезную нагрузку из запроса API, который включает номера индексов каждого элемента.

Виртуальная прокрутка меняла индекс отфильтрованных элементов на странице одновременно с вводом текста. Это вызывало проблему с определением того, какой элемент нажат на странице.

Вместо того, чтобы использовать i в качестве индекса для элементов я использовал полезную нагрузку, которая включает номера индексов для каждого элемента.