Angular Material mat-slide-toggle 切换仅适用于第一个组件答案

【问题标题】：AngularMaterial mat-slide-toggle toogle working only for the first componentAngular Material mat-slide-toggle 切换仅适用于第一个组件
【发布时间】：2020-03-05 06:31:23
【问题描述】：

我有一个 Angular 项目，我正在使用 Angular 材料开发滑动切换和文本字段，并使用 cdk 拖放来实现拖放功能。我对 Angular 库和 Angular 很陌生。

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

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

如果你去那个链接的项目，并切换测试 2 或 3 切换，它会移动第一个 1，我似乎不知道为什么

感谢任何帮助

【问题讨论】：

这里是工作演示stackblitz.com/edit/angular-yezv9a-49tqab?file=src/app/…
啊，他们的 id 字段都是一样的。谢谢！

标签： html angular angular-material drag-and-drop angular-cdk

【解决方案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/

【讨论】：

【解决方案2】：

将id属性设为空

会按预期工作

【讨论】：