Динамическое изменение диапазона ng2-nouislider

Question

У меня есть цикл, который создает разные ng2-noUiSliders, как это:

 <div *ngFor="let property of completeFilters">
            <h5>{{property.propertyName | translate}}</h5>
            <div *ngIf="setSliderValues(property); else renderCheckbox">
              <nouislider #sliderRef [config]="conf" [tooltips]="[true, true]" (end)="onSliderChange($event, property.propertyName)"></nouislider>
            </div>

Созданные ползунки являются ползунками диапазона, и один из них - ползунок цены. При смене валюты я хотел бы обновить ползунок min max другими значениями. Пока что я могу подобрать ползунки вот так:

@ViewChildren('sliderRef') public salesSliders: QueryList<NouisliderComponent>;

this.salesSliders.toArray()[0]; //the slider I want to update
this.salesSliders.toArray()[1];
...

Но я не могу заставить его работать с примерами updateOptions, которые я видел. Кто-нибудь делал это, когда в цикле было несколько слайдеров, как в моем случае?

Answer 1

Для обновления вашего пользовательского интерфейса последними значениями вам нужно выполнить следующие шаги

    // Import this in componnet where your are updating the values
    import { ChangeDetectorRef } from '@angular/core'; 
    constructor(private cd: ChangeDetectorRef) {}


    //call below method after you changes
    this.cd.detectChanges();

Answer 2

let s1 = this.salesSliders.toArray()[0];
let s2 = this.salesSliders.toArray()[1];

    s1.slider.on('change.one', function (event) {
      let conf = {
        behaviour: 'drag',
        tooltips: true,
        connect: 'lower',
        range: {
          min: [5],//any numeric value or value from s1 slider
          max: [25]//any numeric value
        },
        format: {
          to: function ( value ) {
            return value;
          },
          from: function ( value ) {
            return value;
          }
        },
        pips: {
          mode: 'steps',
          stepped: true,
          density: 2
        },
        step: 2,
        start: 5,//any numeric value or value from s1 slider for position of handle
        end: 25//any numeric value
      }
  s2.slider.updateOptions(conf,true); // way to use updateOptions()
})

здесь вам нужно использовать свойство "слайдер". Я использовал слайд-событие. Вы можете проверить больше событий