Angular中的noUiSlider更新事件不会更新幻灯片上的视图，而仅在释放滑块时

Question

  

我正在尝试使用noUiSlider更新事件来更新span元素，以显示在我滑动手柄时设置的值。

释放滑块手柄时，我有一个slider.on('end', this.sliderEnd);事件被调用。这是对设置的值进行搜索的时候。

我有slider.on('update', this.sliderUpdate);，它在console.log中显示随着我滑动而更新的值，但这不显示视图中更改的值吗？

如果我删除了slider.on('end', this.sliderEnd);事件，则显示值的范围将始终不会更新。

有人可以帮助解决这个问题吗？下面，我显示了我的代码在哪里。

component.html

<div #priceSlider id="price"></div>
<div class="u-flex one-whole">
    <span class="c-label one-whole u-mr-small">
        <span data-slider--label="price" data-slider--handle="0">{{selectedMinPrice}}</span>
    </span>
    <span class="c-label one-whole u-right">
        <span data-slider--label="price" data-slider--handle="1">{{selectedMaxPrice}}</span>
    </span>
</div>

component.ts

selectedMinPrice = "Any Price";
selectedMaxPrice = "Any Price";

updateSlideLimits() {
    slider.on('end', this.sliderEnd);
    slider.on('update', this.sliderUpdate);
}

private sliderUpdate = (values: any[], handle) => {

    this.selectedMinPrice = values[0];
    this.selectedMaxPrice = values[1];

    console.log("selectedMinPrice", this.selectedMinPrice);
}

下面是conosle.log结果的图片，其中值是在我一直滑动时打印的，但是在滑块下面的视图中，它仅在释放手柄时更新了跨度。

在滑动时如何更新跨度？

  

**更新

component.ts

更改对函数的更新根本不会更新视图。在我最初的问题中，它所做的方式确实会更新视图，但仅在释放句柄之后才会更新视图？

在两个示例中，console.log在我滑动手柄时都在更新。

    updateSlideLimits() {
        slider.on('end', this.sliderEnd);

        slider.on('update', function (this, values, handle) {

            this.selectedMinPrice = values[0];
            this.selectedMaxPrice = values[1];

            console.log("Minprice", this.selectedMinPrice);
            console.log("Maxprice", this.selectedMaxPrice);
        });
}

---