每当我更改范围值
时,我都会尝试使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';
}
最佳答案
您无法在 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
将无法工作。
关于javascript - 两种方式绑定(bind) ngStyle,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55093379/