带有 angular2 的 nouislider - set 不是一个函数

Question

我正在使用 2 手柄 nouislider。它工作得很好，但是当我尝试从代码更新句柄位置时，我不断收到错误消息：set is not a function。我错过了什么？

//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, …}

显然我错过了一些步骤。我在 chrome 浏览器 Windows 10.

上使用 nouislider v13.1.0 和 angular v7.1.0 运行

谢谢

Answer 1

ElementRef只包含1个属性 -- nativeElement.

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

Answer 2

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

来获取对组件 HTML 宿主元素的引用

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

带有 angular2 的 nouislider - set 不是一个函数

nouislider with angular2 - set is not a function

nouislider

angular