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