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

Question

每当我更改范围值时，我都会尝试使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 将无法工作。