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>

创建的滑块是范围滑块，其中一个是价格滑块。更改货币时，我想使用其他值来更新滑块的最小最大。到目前为止，我已经能够拾取像这样的滑块：

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

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

但是我无法将其与我见过的updateOptions示例一起使用。在像我这样的循环中创建了多个滑块时，有人做过吗？

Answer 1

要使用最新值更新UI，您需要执行以下步骤

    // 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()
})

在这里您需要使用“ slider”属性。我已使用幻灯片事件。您可以检查更多事件

动态更改ng2-nouislider的范围

2 个答案: