AngularMaterial mat-slide-toggle 工具仅适用于第一个组件

Question

我有一个 angular 项目，我正在开发使用 angular 材料进行滑动切换和文本字段，以及用于拖放功能的 cdk 拖放。 我对 angular 库和 angular 很陌生。

我遇到了一个问题，即滑动切换仅切换 *ngFor 循环内的第一个元素。 我曾尝试向 ngFor 添加一个 let i = index 并且无论您选择哪个切换，它始终作为 0 传递，但是如果我放置 {{ i }}，它将显示为正确的索引。 我很茫然。

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

如果您转到该链接上的项目，并切换测试 2 或 3 切换，它将移动第一个 1，我似乎无法弄清楚为什么

任何帮助表示赞赏

Answer 1

如果我理解正确，您的代码中有一个问题是mat-slide-toggle元素的 id 在ngFor重复

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

我删除了 id 属性并发现工作正常，根据我的理解，您可以在下面的 url 中找到工作示例的分支

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

Answer 2

将 id 属性设为空

将按预期工作