Question

使用ngx-ui滑块查看年份范围。这是HTML部分：

onChangeYear()

这是我的onChangeYear(value) { this.globalYearSelection = value; this.getAllChartsData(); }函数的组件：

this.globalYearSelection

正如您所看到的，当我更改滑块的值时，我更新了this.getAllChartsData()，然后我调用了一个包含多个HTTP请求的函数来获取一些数据。

但是，当我更改滑块的值时，滑块的每一步都会多次调用onChangeYear(value) { this.globalYearSelection = value; setTimeout(() => this.getAllChartsData(), 2000); }。

我试着这样做：

(blur)="onChangeYear($event.value)"

确保它仅在2秒后触发HTTP请求，但结果是等待2秒，然后触发我一次滑入的所有值的所有请求。

我还尝试使用{{1}}，但它与组件不兼容。

知道我能做什么吗？

Answer 1

知道了，不需要documents/fileName.xml

组件方：

(change)="onChangeYear($event.value)"

模板方：

sliderValue = 0;

sliderEvent() {
    alert(this.sliderValue);
    // call your api for fetching data
    // this.sliderValue will be updated as it's
    // already 2 way binded
}

以下是工作演示的链接：

save

Answer 2

'ngx-slider' 只会给我们提供触发点 'userChange'

https://github.com/angular-slider/ngx-slider/blob/master/typedoc-theme/README.md

Answer 3

您可以使用此事件

userChangeEnd

将执行您想要的相同行为。

正确标记的解决方案有问题：

在 (mouseup) 事件中，如果您拉动滑块并将鼠标移离滑块，滑块值会改变但不会触发事件

在Angular中几秒钟后触发（更改）滑块

3 个答案: