Angular Material 滑块 - 将值设置为零时出现问题

Question

我想使用 Angular 材质和 Angular 5 创建一个滑块，当滑块上的值设置为 0 时，它会向上移动到 10。

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

myComponent.html

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

myComponent.ts

  weight = 50;

  change(){
    if(this.weight == 0){
      this.weight = 10;
    }
  }

我在 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>

Angular Material Slider - issue with setting value to zero