滑动时获取 Angular Material v2 滑块的值
Get Angular Material v2 slider's value while sliding
我在组件中使用 Angular Material v2 md-slider
@Component({
selector: 'ha-light',
template: `<md-slider min="0" max="1000" step="1"
[(ngModel)]="myValue" (change)="onChange()"></md-slider>
{{myValue}}`,
styleUrls: ['./light.component.css']
})
export class LightComponent implements OnInit {
myValue = 500;
constructor() { }
ngOnInit() { }
onChange(){
console.log(this.myValue);
}
}
和 myValue
更新得很好并且正在调用 onChange
方法,但只有当我停止滑动并释放鼠标按钮时才会调用。
有没有办法让 myValue
更新并在我滑动滑块时调用函数?
我注意到 aria-valuenow
属性在我滑动时会发生变化,但我不太确定如何使用它来满足我的需要(如果它完全可以使用的话)。
好问题。 Angular Material 添加了这样的功能。参见 this commit。
在您的情况下,您不会收听 (change)
事件,而是收听 (input)
事件。这是一个例子:
<mat-slider (input)="onInputChange($event)"></mat-slider>
onInputChange(event: MatSliderChange) {
console.log("This is emitted as the thumb slides");
console.log(event.value);
}
我试图在我的组件中获取 mat-slider 值,我通过使用 event.value 获得了它,如下所示。提交此答案以帮助像我这样的人 :) 谢谢
<md-slider (input)="onInputChange($event)"></md-slider>
onInputChange(event: any) {
console.log(event.value);
}
我在组件中使用 Angular Material v2 md-slider
@Component({
selector: 'ha-light',
template: `<md-slider min="0" max="1000" step="1"
[(ngModel)]="myValue" (change)="onChange()"></md-slider>
{{myValue}}`,
styleUrls: ['./light.component.css']
})
export class LightComponent implements OnInit {
myValue = 500;
constructor() { }
ngOnInit() { }
onChange(){
console.log(this.myValue);
}
}
和 myValue
更新得很好并且正在调用 onChange
方法,但只有当我停止滑动并释放鼠标按钮时才会调用。
有没有办法让 myValue
更新并在我滑动滑块时调用函数?
我注意到 aria-valuenow
属性在我滑动时会发生变化,但我不太确定如何使用它来满足我的需要(如果它完全可以使用的话)。
好问题。 Angular Material 添加了这样的功能。参见 this commit。
在您的情况下,您不会收听 (change)
事件,而是收听 (input)
事件。这是一个例子:
<mat-slider (input)="onInputChange($event)"></mat-slider>
onInputChange(event: MatSliderChange) {
console.log("This is emitted as the thumb slides");
console.log(event.value);
}
我试图在我的组件中获取 mat-slider 值,我通过使用 event.value 获得了它,如下所示。提交此答案以帮助像我这样的人 :) 谢谢
<md-slider (input)="onInputChange($event)"></md-slider>
onInputChange(event: any) {
console.log(event.value);
}