Question

我想在同一页面上使用多个滑块，但是由于某些原因，所有滑块的范围都与第一个滑块范围值相同。这是我的html：

<div *ngFor="let property of comepleteFilters">
                <h5>{{property.propertyName}}</h5>
                <div *ngIf="setSliderValues(property); else renderCheckbox">

                  <nouislider #slider [min]="minSliderValue" [max]="maxSliderValue" [step]="stepSliderValue" [config]="conf" [tooltips]="[true, true]" (end)="onSliderChange($event)"></nouislider>

                </div>

这是我的ts文件：

conf: any = {
    start: [0, 10],
    behaviour: 'drag'
  };

.. ..

  setSliderValues(sliderFilter: FilterList) {
    if (sliderFilter.propertyName === 'enginePower' || sliderFilter.propertyName === 'wheelBase') {
      this.minSliderValue = sliderFilter.propertyValues[0];
      this.maxSliderValue = sliderFilter.propertyValues[sliderFilter.propertyValues.length - 1];
      this.stepSliderValue = 5;
      return true;
    } else {
      return false;
    }

  }

例如，第一滑块的值介于0-730之间，第二滑块的值介于2300-12000之间。但是两个滑块最终的取值范围是0-730。我什至尝试硬编码到具有不同值的滑块，而不是循环查看结果是否不同，但仍然遇到相同的问题。我正在使用Angular 6。

Answer 1

因为您设置了相同的最小值和最大值。调用setSliderValues（）函数时，将一个值设置为max和min。 this.minSliderValue总是从上一个*ngFor循环中获取值。

<div *ngFor="let property of comepleteFilters">
   <h5>{{property.propertyName}}</h5>
   <div *ngIf="setSliderValues(property); else renderCheckbox">
     <nouislider #slider [min]="property.propertyValues[0]" [max]="property.propertyValues[sliderFilter.propertyValues.length - 1]" [step]="stepSliderValue" [config]="conf" [tooltips]="[true, true]" (end)="onSliderChange($event)"></nouislider>
   </div>
</div>

Answer 2

不，不是这样。即使我像这样对2个滑块进行硬编码，也会出现相同的问题：

<nouislider #slider [min]="0" [max]="730" [step]="10" [config]="conf" [tooltips]="[true, true]"></nouislider>
<nouislider #slider [min]="2300" [max]="12000" [step]="100" [config]="conf" [tooltips]="[true, true]"></nouislider>

只有该步骤可以正常工作。

我只是注意到使用相同的config变量，该问题与我有关。如果我使用2个具有相同值的不同配置，则可以使用。我想念什么吗？

Ng2-NoUISlider获得相同的范围值

2 个答案: