双向绑定ngStyle

Question

每当我更改我的range value时，我都会尝试让ngStyle更改其left字段的值。

我的灵感来自于它是如何在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';
  }

Answer 1

您不能在span上使用change，因为它上没有这样的事件。实际上，您甚至不需要它，因为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将无法工作。

Answer 2

你能尝试设置一个函数来像这样绑定样式吗？

<span id="rs-bullet" [ngStyle]="setRangePosStyles(RangePos)" (change)="changeZoom()" class="rs-label" >{{ rangeValue }}</span>

组件：

setRangePosStyles(RangePos){
        return {'left':RangePos};
    }