我需要一种方法去抖清晰度datagrid发出的事件,这样我只能在用户完成输入后从后端获取数据。我在角度6应用程序中使用网格并将事件绑定到我的函数。我的设置如下,
<clr-datagrid (clrDgRefresh)="fetchData($event)"></clr-datagrid>
fetchData(state) {
// Fetch data from back end
}
如何对事件进行去抖动,以便它不会在每个键盘上触发我的fetchData函数?我没有任何datagrids过滤器输入的句柄,我也不知道将有多少输入。我只有在任何网格过滤器输入上有一个键时触发的事件。
您可以使用rxjs运算符debounceTime
去除应用程序端的事件
debouncer = new Subject<any>();
refresh(state: ClrDatagridStateInterface) {
this.debouncer.next(state);
}
this.debouncer.asObservable().pipe(
debounceTime(2000)
).subscribe(state => {
this.loading = true;
const filters: { [prop: string]: any[] } = {};
if (state.filters) {
for (const filter of state.filters) {
const { property, value } = <{ property: string; value: string }>filter;
filters[property] = [value];
}
}
this.inventory
.filter(filters)
.sort(<{ by: string; reverse: boolean }>state.sort)
.fetch(state.page.from, state.page.size)
.then((result: FetchResult) => {
this.users = result.users;
this.total = result.length;
this.loading = false;
});
})
这是一个快速的POC,所以很明显它也可以为datagrid状态接口输入或以其他方式改进(例如更多rxjs运算符来处理其他用例)。除此之外,它应该让您了解数据网格事件如何被该应用程序去除。
这是关于stackblitz的工作POC。