Как динамически перемещать ручку ползунка угловых материалов со свойством значения

Question

Я использую мат-слайдер из углового материала для формуляра, наподобие этого:

<mat-slider thumbLabel value="this.objectArray[i].numberProperty"></mat-slider>

Проблема в том, что ручка слайдера просто остается в начале. Странная часть заключается в том, что когда я жестко запрограммировал это следующим образом:

<mat-slider thumbLabel value="5"></mat-slider>

Тогда это работает по какой-то причине.

Если я использую [(ngModel)] на входе, подобномпосле этого он работает, но [(ngModel)] не совместим с мат-слайдером, насколько я знаю

<input type="number" [(ngModel)]="presentationSlideTimes[i].slidetime">

Надеюсь, вы, ребята, можете мне помочь <3 </p>

Answer 1

Вместо этого вы должны попробовать связать его как ввод, так как это угловое значение. У вас есть два варианта:

<mat-slider thumbLabel [value]="this.objectArray[i].numberProperty"></mat-slider>

Или:

<mat-slider thumbLabel value="{{this.objectArray[i].numberProperty}}"></mat-slider>

Они оба должны работать. Кроме того, насколько мне известно, mat-slider действительно реализует ControlValueAccessor, поэтому он также должен поддерживать [(ngModel)].

Answer 2

Вам просто нужно добавить квадратную скобку к следующему атрибуту значения

<mat-slider thumbLabel [value]="this.objectArray[i].numberProperty"></mat-slider>

Answer 3

Кто вам сказал, что это не совместимо? Материальная команда использует его в примере . Не стесняйтесь использовать его;)