Как динамически включить или отключить ионно-дальномерный слайдер с помощью Ionic 3 и Angular 5? - PullRequest
Новая
       20

Как динамически включить или отключить ионно-дальномерный слайдер с помощью Ionic 3 и Angular 5?

0 голосов
/ 24 мая 2018

Я реализовал слайдер, используя ion-range-slider.Имеется опция отключения, чтобы включить или отключить слайдер.Но мне нужно, чтобы он включался / отключался динамически.

Я пробовал таким образом.Я не могу этого достичь.Пожалуйста, помогите мне, что мне нужно сделать?Это ее код. 

<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>

Пожалуйстаукажи мне, как действовать.

1 Ответ

0 голосов
/ 24 мая 2018

Вам просто нужно использовать [] для привязки вашей логической переменной к свойству компонента. 

<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>
...