Angular 如何设置“离子范围”的最大值?
我有以下Angular 如何设置“离子范围”的最大值?,angular,typescript,ionic-framework,ionic2,ionic3,Angular,Typescript,Ionic Framework,Ionic2,Ionic3,我有以下离子范围组件 我将最小值和最大值分别设置为0和120 但我还想将拇指的移动限制为低于120(上限)的值,例如:85,但保留以前的限制:0和120 <ion-list> <ion-item> <ion-range min="0" max="120" pin="true" [(ngModel)]="myValue"></ion-range> </ion-item> </ion-list>
离子范围组件
我将最小值和最大值分别设置为0
和120
但我还想将拇指的移动限制为低于120
(上限)的值,例如:85
,但保留以前的限制:0
和120
<ion-list>
<ion-item>
<ion-range min="0" max="120" pin="true" [(ngModel)]="myValue"></ion-range>
</ion-item>
</ion-list>
例如:
你知道如何实现这一目标吗
谢谢 我遇到了同样的问题,并且有了一个快速解决方案
您可以将ionChange
事件添加到ionrange
组件中,并调用函数更新范围的当前值。这将在每次更改范围值时触发函数,但仅在匹配逻辑语句时更改当前值
重要:有趣的是,对于单旋钮范围,还需要将debounce
属性设置为正非零数(默认值为0)。这说明Ionic在触发ionChange
事件之前应该等待多长时间。当debounce
=0时,分配给保存该值的变量的值(即myValue
)在调用函数时会发生变化,但是,范围位置的视觉变化不会仅在单旋钮范围内发生(在双旋钮范围内工作正常)。这是爱奥尼亚团队应该调查的一个bug
例如,在.html
文件中添加ionChange
事件和debounce
属性:
<ion-range min="0" max="120" pin="true" [(ngModel)]="myValue" (ionChange)="restrictValue()" debounce="1"></ion-range>
restrictValue () {
if (this.myValue >= 85) {
this.myValue = 85;
}
}
希望这有帮助