两种方式绑定ngStyle

时间:2019-03-10 23:18:15

标签: javascript angular

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

2 个答案:

答案 0 :(得分: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将不起作用。

答案 1 :(得分:0)

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

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

组件:

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