在Angular2

Question

我在angular6 app中使用html圆形滑块： https://www.w3schools.com/howto/howto_js_rangeslider.asp

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

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

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

.ts文件的实现：

import { Component } from '@angular/core';

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

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

}

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

Answer 1

尝试添加[（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;
  }

}

模板

<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)">

在行动Here中查看。你可能不得不对闪烁做些什么。