AngularMaterial mat-slide-toogle toogle работает только для первого компонента

Question

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

Я столкнулся с проблемой, когда переключение слайда только переключает первый элемент внутри * ngFor l oop. Я попытался добавить let i = index в ngFor, и он всегда передается как 0, независимо от того, какой переключатель вы выбираете, однако, если я поставлю {{i}}, он будет отображаться как правильный индекс. Я в растерянности.

https://stackblitz.com/edit/angular-yezv9a

Если вы go подключитесь к проекту по этой ссылке и переключите тест 2 или 3, он будет сдвиньте первую 1, и я не могу понять, почему

Любая помощь приветствуется

Answer 1

Если я правильно вас понимаю, в вашем коде есть одна проблема: mat-slide-toggle элемент имеет идентификатор, который повторяется в ngFor

<mat-slide-toggle id="toggle" color="primary" (change)="onToggle(button)" [checked]="button.enabled"></mat-slide-toggle>

Я удалил идентификатор атрибут и найдено работает правильно, исходя из моего понимания, вы можете найти ответвление рабочего примера в ниже URL

https://angular-yezv9a-bac1jz.stackblitz.io/

Answer 2

Сделать атрибут id пустым

Будет работать как положено