在Angular2中移动HTML滑块时动态更新变量值

我在我的angular6应用程序中使用html圆形滑块：

.html文件中的实现如下所示：

<span style="font-size: 130px;">{{sliderVal}}</span>

<input type="range" #slider min="1" max="10" value="1" class="slider" (change)="onPriceSliderChange(slider.value)">

仅当滑块移动且我取消按下鼠标左键时，sliderVal值才会更改。我想在每次移动滑块时动态更新sliderVal的值，而不仅仅是在取消按下鼠标按钮时。我知道如何使用jQuery实现这一点，但我不想将jQuery解决方案与Angular混合使用。有什么想法吗？干杯

尝试添加[（ngModel）]可以解决您的问题

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
public sliderVal = 1;
  constructor() {
   }

  onPriceSliderChange(val) {
    this.sliderVal = val;
  }

}

模板

{{sliderVal}

看到它在行动。不过，你可能需要对闪烁的光线做些什么

天才。谢谢我添加了[（ngModel）]=“sliderVal”，并在@NgModule中注册了FormsModule（{imports:[FormsModule，…）

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
public sliderVal = 1;
  constructor() {
   }

  onPriceSliderChange(val) {
    this.sliderVal = val;
  }

}

<span style="font-size: 130px;">{{sliderVal}}</span>

<input type="range" #slider min="1" max="10" value="1" [(ngModel)] ="sliderVal" class="slider" (change)="onPriceSliderChange(slider.value)">