滑动时 Mat Slider 值未更新
Mat Slider value not getting updated while sliding
Mat 滑块值在滑动时不同步更新。
<mat-slider [(ngModel)]="myValue" step="1" min="0" max="100" ></mat-slider>
{{myValue}}
它只是在释放滑块拇指后才更新。
您需要将 input
输出(奇怪的名称选择)绑定到处理程序,请参阅 the docs。如果您想跟踪滑块值,您可以执行以下操作:
<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 rxjs@6.x
import {BehaviorSubject} from 'rxjs'
private slideSubject = new BehaviorSubject<int>(0);
readonly slideValue$ = this.slideSubject.asObservable();
updateSliderValue(event: MatSliderChange){
slideSubject.next(event.value);
}
使用javascript输入事件:
<mat-slider [(ngModel)]="myValue" (input)="myValue = $event.value"></mat-slider>
如果您在 FormControl 中使用反应式表单,您可以像这样直接调用表单控件上的 setValue
:
(input)="form.controls['direction'].setValue($event.value)"
Mat 滑块值在滑动时不同步更新。
<mat-slider [(ngModel)]="myValue" step="1" min="0" max="100" ></mat-slider>
{{myValue}}
它只是在释放滑块拇指后才更新。
您需要将 input
输出(奇怪的名称选择)绑定到处理程序,请参阅 the docs。如果您想跟踪滑块值,您可以执行以下操作:
<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 rxjs@6.x
import {BehaviorSubject} from 'rxjs'
private slideSubject = new BehaviorSubject<int>(0);
readonly slideValue$ = this.slideSubject.asObservable();
updateSliderValue(event: MatSliderChange){
slideSubject.next(event.value);
}
使用javascript输入事件:
<mat-slider [(ngModel)]="myValue" (input)="myValue = $event.value"></mat-slider>
如果您在 FormControl 中使用反应式表单,您可以像这样直接调用表单控件上的 setValue
:
(input)="form.controls['direction'].setValue($event.value)"