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

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

0 голосов
/ 30 апреля 2020

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

1 Ответ

0 голосов
/ 01 мая 2020

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

event.value

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

event.source._elementRef.nativeElement.id

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

...