Question

我正在使用2句柄nouislider。效果很好，但是当我尝试从代码更新句柄位置时，我不断收到错误消息： set不是一个函数。我想念什么？

//HTML

<nouislider #mrangeslider [connect]="true" [step]=".05"
          [(ngModel)]="sliderMRangeSel" (change)="updateSliderM($event)"
          [min]="sliderMBounds[0]"
          [max]="sliderMBounds[1]">
</nouislider>

//in main module

import { NouisliderModule } from 'ng2-nouislider';

// in component

@ViewChild("mrangeslider") mSliderEl : ElementRef;
sliderMBounds = [1,2];
sliderMRangeSel = [1.25,1.75];
...
this.sliderMRangeSel = [1.25,1.75];
this.mSliderEl.set(this.sliderMRangeSel); // trying to update the handles

在浏览器中我也得到相同的信息：

> this.mSliderEl.set([1.25,1.75])
  VM492:1 Uncaught TypeError: this.mSliderEl.set is not a function
// but there is a `set` property defined, no observers
> this.mSliderEl.set
  EventEmitter {_isScalar: false, observers: Array(0), closed: false,
                   isStopped: false, hasError: false, …}

很明显，我错过了一些步骤。我将nouislider v13.1.0和运行在Chrome浏览器Windows 10上的angular v7.1.0使用。

谢谢

Answer 1

由于在滑块组件上设置了模板引用变量#mrangeslider，因此@ViewChild()给出的默认值是NouisliderComponent类实例。我认为这就是您想要的。使用它，您可以访问滑块的属性和方法。如果需要，可以通过将read属性设置为ElementRef来获得对组件HTML host元素的引用：

@ViewChild("mrangeslider") mSliderComp: NouisliderComponent;
@ViewChild("mrangeslider", { read: ElementRef }) mSliderEl: ElementRef;

话虽这么说，由于sliderMRangeSel与[(ngModel)]绑定，所以在更改范围值时，组件应自动调整，而不必调用组件的方法。

setSliderRange() {
  // The slider will adjust after selecting the range
  this.sliderMRangeSel = [1.15, 1.9];
}

有关演示，请参见this stackblitz。

Answer 2

ElementRef仅包含1个属性-nativeElement。

https://angular.io/api/core/ElementRef#properties

带有angular2的nouislider-设置不是函数

2 个答案: