javascript - 两种方式绑定(bind)ngStyle

我试图让ngStyle每次更改left的值时都更改其range value字段值。

我的灵感来自于https://codepen.io/mayuMPH/pen/ZjxGEY
但我没有找到一种方法来在angular6-7中做到这一点。

仅当加载文档时，左ngStyle值才会更改。但是当我拖动范围时，我没有使它起作用。如何实现rs-bullet以遵循该值？

html代码：

<div class="container">
  <div class="range-slider">
    <span id="rs-bullet" [ngStyle]="{'left':RangePos}"   (change)="changeZoom()" class="rs-label" >{{ rangeValue }}</span>
    <input id="rs-range-line" [(ngModel)]="rangeValue" class="rs-range" type="range" value="0" min="0" max="100">

  </div>

  <div class="box-minmax">
    <span>0</span><span>200</span>
  </div>



</div>

零件：

  rangeValue = 0;
  RangePos = ((40 / 1000) * 578) + 'px';

  ngOnInit() {






  }

  changeZoom() {
    this.RangePos = ((this.rangeValue / 1000) * 578) + 'px';
  }

最佳答案

您不能在change上使用span，因为上面没有此类事件。实际上，您甚至不需要它，因为ngModel应该处理所有更改。

因此，要使您的示例正常工作，您应该进行更改

changeZoom() {
    return ((this.rangeValue / 1000) * 578) + 'px';
}

和

<span id="rs-bullet" [ngStyle]="{'left': changeZoom()}"
      class="rs-label" >{{ rangeValue }}
</span>

另外，示例中的分频器1000不正确，因为您输入的范围最大值是100。

在这里，您可以看到在Angular中工作的示例：https://stackblitz.com/edit/angular-66fr5v。

确保已将FormsModule添加到应用程序模块。否则ngModel将不起作用。

关于javascript - 两种方式绑定(bind)ngStyle，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55093379/

NgStyle

javascript - 两种方式绑定(bind)ngStyle