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

Я динамически создаю несколько матов-слайдеров в 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» указан правильно, но «значение» «не определено». Любая помощь приветствуется, я готов сделать это совершенно по-другому, если это необходимо.


typescript slider angular ngfor mat-slider
person Caustix    schedule 30.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

event.value

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

event.source._elementRef.nativeElement.id

И «значение», и «источник» доступны из объекта «событие» MatSliderChange.

person Caustix    schedule 30.04.2020