Angular-反跳清晰度vm-ware datagrid clrDgRefresh

时间:2019-03-12 21:11:50

标签: angular vmware-clarity

我需要一种方法来消除由清除datagrid发出的事件,以便仅在用户完成键入后才从后端获取数据。我在angular 6应用程序中使用网格并将事件绑定到我的函数。我的设置如下,

QWidgetAction

如何对事件进行反跳操作,以免在每次键入键时都不会触发fetchData函数?我没有任何datagrids过滤器输入的句柄,也不知道会有多少输入。我所拥有的只是一个事件,当任何网格过滤器输入上的键都按下时就会触发。

1 个答案:

答案 0 :(得分:2)

您可以使用rxjs运算符debounceTime

在应用程序端对事件进行反跳

设置充当数据网格状态流的主题

debouncer = new Subject<any>();

将状态传递给去抖器

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

订阅去抖动器并使用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,因此显然也可以为datagrid状态接口键入它或以其他方式进行改进(例如,更多的rxjs运算符来处理其他用例)。除此之外,它还应该使您了解该应用程序如何消除数据网格事件。

这是stackblitz上的有效POC。