滑动时垫滑块值未更新

Question

滑动时垫滑块值不会同步更新。

<mat-slider [(ngModel)]="myValue" step="1" min="0" max="100" ></mat-slider>
{{myValue}} 

释放滑块拇指后才更新。

Answer 1

使用 javascript 输入事件：

<mat-slider [(ngModel)]="myValue" (input)="myValue = $event.value"></mat-slider>

Answer 2

您需要将

input

输出（奇怪的名称选择）绑定到处理程序，请参阅文档。如果您想跟踪滑块值，您可以执行以下操作：

<mat-slider (change)="updateSliderValue($event)" (input)="updateSliderValue($event)
 [(ngModel)]="myValue" 
 step="1" min="0" max="100" ></mat-slider>
{{ slideValue$ | async }}


import {MatSliderChange} from '@angular/material';
// Using [email protected]
import {BehaviorSubject} from 'rxjs'
private slideSubject = new BehaviorSubject<int>(0);
readonly slideValue$ = this.slideSubject.asObservable();

updateSliderValue(event: MatSliderChange){
    slideSubject.next(event.value);
}

Answer 3

如果您在 FormControl 中使用反应式表单，您可以直接在表单控件上调用

setValue

，如下所示：

(input)="form.controls['direction'].setValue($event.value)"

Answer 4

在使用 Angular Material 的 Angular 17 中，现在似乎是

$event.target.value

而不是

event.value