Angular - 去抖动清晰度 vm-ware datagrid clrDgRefresh

Question

我需要一种方法来消除由清晰数据网格发出的事件的抖动，以便我只在用户完成输入后从后端获取数据。我在 Angular 6 应用程序中使用网格并将事件绑定到我的函数。我的设置如下，

<clr-datagrid (clrDgRefresh)="fetchData($event)"></clr-datagrid>

fetchData(state) {
  // Fetch data from back end
}

如何消除事件的抖动，使其不会在每个按键上触发我的 fetchData 函数？我没有任何数据网格过滤器输入的句柄，我也不知道会有多少输入。我所拥有的只是一个在任何网格过滤器输入上有按键时触发的事件。

Answer 1

您可以使用 rxjs 操作符debounceTime 对应用端的事件进行去抖动处理

• 文档：http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime
• 示例：https://www.learnrxjs.io/operators/filtering/debouncetime.html

设置作为数据网格状态流的主题

debouncer = new Subject<any>();

将状态传递给去抖动器：

refresh(state: ClrDatagridStateInterface) {
  this.debouncer.next(state);
}

订阅 debouncer 并使用 debouceTime

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，因此显然它也可以用于数据网格状态接口或以其他方式改进（例如更多 rxjs 运算符来处理其他用例）。除此之外，它应该让您了解该应用程序如何消除数据网格事件。

这是stackblitz 上的工作 POC。