从 ngFor 中动态创建的多个 mat-slider 获取值答案

【问题标题】：Get values from multiple mat-sliders dynamically created within ngFor从 ngFor 中动态创建的多个 mat-slider 获取值
【发布时间】：2020-08-14 19:48:12
【问题描述】：

我在 Angular 中动态创建多个垫子滑块，如下所示：

<ng-container *ngFor="let parameter of parameterValues; let i = index;">
  <mat-slider (input)="onInputChange($event)" min="1" max="{{ parameter.length }}" step="1" value="1" id="{{ 'myslider' + i }}"></mat-slider>
</ng-container>

当任何滑块位置发生更改时，我想触发一个事件，该事件随后调用另一个函数，该函数接收一个数组'sliderValues'，其中包含每个动态创建的垫滑块值。我正在尝试这样做：

  onInputChange(event: MatSliderChange) {
   for (let i = 0; i < this.results.parameterNames.length; i++) {
    const theid = "myslider" + i;
    var ele = document.getElementById(theid)
    console.log((ele as HTMLInputElement).id + " is the id");
    console.log((ele as HTMLInputElement).value + " is the value");
    this.sliderValues.push((ele as HTMLInputElement).value);
   }
   //some function called here which accepts 'this.sliderValues' as a parameter 
  }

这目前不起作用；我无法访问滑块的值。在控制台中，我看到“id”报告正确，但“值”是“未定义”。任何帮助表示赞赏，如果需要，我愿意以完全不同的方式来做。

【问题讨论】：

标签： angular typescript slider ngfor mat-slider

【解决方案1】：

我找到了一种更简洁的方法。该值可以从：

event.value

ID 来自：

event.source._elementRef.nativeElement.id

'value' 和 'source' 都可以从 MatSliderChange 'event' 对象访问

【讨论】：