角度材料滑块 - 将值设置为零的问题

Question

我想使用Angular Materials和Angular 5创建一个滑块，当滑块上的值设置为0时，它将向后移动到10.

我遇到一个问题，如果滑块已经在10，滑块将不会向后移动到10，否则它会。

myComponent.html

subprocess.Popen(["DEL /S /F /Q  D:\path\to\the\file\*.LOG"], shell=True, stdout=subprocess.PIPE)

myComponent.ts

<mat-slider [(ngModel)]="weight" (change)="change()"></mat-slider>

我在StackBlitz中重新创建了这个问题：https://stackblitz.com/edit/angular-whq8ll

Answer 1

发生此问题的原因是change()正在设置事件更改范围之外的项的值。解决此问题的一种方法是使用change()将ChangeDetectorRef包含在更改检测范围内。另一种方法是直接设置幻灯片值以再次处理更改事件：

组件方：

weight = 50;
@ViewChild('slider')slider;
change(){
    console.log(this.slider.value);
    if(this.weight == 0){
    this.slider.value = 10;
    }
}

模板方：

<mat-slider [(ngModel)]="weight" #slider (change)="change()"></mat-slider>

<强> codepen