首页 文章

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

提问于
浏览 次
0

我想使用Angular Materials和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

angular angular-material angular-material2 angular5

1 回答

  • 1

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

    Component side :

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

    Template side :

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

    WORKING DEMO

    回复于

相关问题