Получение значений из нескольких мат-слайдеров, динамически созданных в ngFor

Question

Я динамически создаю несколько матов-слайдеров в 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, который содержит каждое из динамически создаваемых значений mat-slider. Я пытаюсь это сделать с помощью:

  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" сообщается правильно, но "value" - "undefined". Любая помощь приветствуется, я готов сделать это совершенно по-другому, если потребуется.

Answer 1

Я нашел более чистый способ сделать это. Значение можно получить из:

event.value

и идентификатор из:

event.source._elementRef.nativeElement.id

И 'value', и 'source' доступны из объекта 'event' MatSliderChange.