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

Question

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

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

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

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

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

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

Answer 1

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

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

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