Angular mat 滑块在与 *ngFor 一起使用时无法正常工作

Question

我的问题非常简单，因为我可以通过 stackblitz 重现它。

如果我使用从 *ngFor 列表创建的多个垫滑块，其中包含滑块值的数字，在捕获“输入”事件时，滑块将不会按预期工作，滑动第一个滑块将导致移动所有其他滑块，但只是第一次拖动，在以下内容中，只有第一个滑块会更新，但是，我无法自由移动它，当我尝试用鼠标拖动滑块时它只是停止稍微移动后

我不知道为什么会发生这种情况，如果我手动渲染 matsliders（不使用 ngFor），一切都会按预期工作，但我看不出 *ngFor 有什么问题，我实际上需要在我的实际项目中动态渲染滑块.

任何帮助将不胜感激。我正在使用 Google Chrome、Angular 11 和 Angular Material 11.2.12

编辑：如果我尝试使用“s”局部变量更改值 angular 将抛出以下错误“无法使用变量 's' 作为赋值的左侧表达式。模板变量是只读的。”，这不会发生在 stackblitz 中，也不知道为什么

Answer 1

我不确定你为什么要使用 let i = index 和 index[i]，而你有 s。老实说，我不确定为什么会发生这种情况，但这似乎可以解决问题：

<div *ngFor="let s of list; let i = index">
  <mat-slider [(ngModel)]="list[i]"> </mat-slider>
  {{ s }}
</div>

Angular mat slider not working properly when used with *ngFor