Question

每当我对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';
  }

Answer 1

您不能在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将不起作用。

Answer 2

您可以尝试设置一个绑定样式的函数吗？

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

组件：

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

两种方式绑定ngStyle

2 个答案: