如何使用 Ionic 3 和 Angular 5 动态启用或禁用离子范围滑块？

Question

我已经使用 ion-range-slider 实现了一个滑块。它有一个禁用选项来启用或禁用滑块。但是我需要动态地enable/disable。

我试过这种方法。我无法做到这一点。请帮助我，我需要做什么？她是密码。

<ion-range-slider #advancedSliderElement
                  type="single"
                  [min]="0"
                  max="100"
                  from={{r.rule}}    
                  from_shadow="true"
                  to="40"
                  to_shadow="true"
                  grid="true"
                  grid_num="10"
                  prefix=""
                  postfix=""
                  decorate_both="false"
                  disable = "rangeDisable"
                  (onChange)="update(advancedSlider, $event)"
                  (onFinish)="finish(advancedSlider, $event, i)">
            </ion-range-slider>

我的manage.ts代码是：

export class ManagePage {
public rangeDisable: boolean = true;
constructor(public navCtrl: NavController) {}
enableSave() {
        this.rangeDisable = false;
    }
}

我需要在单击按钮时启用滑块

<button class="button-border" ion-button round (click)="enableSave()" ><i class="material-icons">create</i> </button>

请指导我如何进行。

Answer 1

您只需要使用 [] 将您的布尔变量绑定到组件的属性。

<ion-range-slider #advancedSliderElement
                  type="single"
                  min="0"//no need to bind if you are sending a value
                  max="100"
                  [from]="r.rule"  
                  from_shadow="true"
                  to="40"
                  to_shadow="true"
                  grid="true"
                  grid_num="10"
                  prefix=""
                  postfix=""
                  decorate_both="false"
                  [disable] = "rangeDisable"//here
                  (onChange)="update(advancedSlider, $event)"
                  (onFinish)="finish(advancedSlider, $event, i)">
            </ion-range-slider>

如何使用 Ionic 3 和 Angular 5 动态启用或禁用离子范围滑块？

How to dynamically enable or disable ion-range-slider using Ionic 3 and Angular 5?

ionic3

angular5

ion-range-slider