Clarity Datagrid 服务器端绑定自定义过滤器（代码优化）

Question

我正在尝试优化我的代码，该代码利用 Clarity 数据网格与服务器端绑定和一些自定义操作（例如， 一个自定义过滤器，类似于Datagrid Enhancement: Filtering）和一个刷新按钮，用于重新获取网格数据并进行其他调用）。

这是当前的工作流程：

• 初始加载

  • datagridRefresh()

    • 刷新()

      • additionalCalls()
      • dispatchFilterRequestPromise()

• 自定义刷新按钮

  • 刷新()

    • additionalCalls()
    • dispatchFilterRequestPromise()
• 分页
  • datagridRefresh()
    • dispatchFilterRequestPromise()

• 自定义过滤

  • filterChange()

    • $(".pagination-first").click()
      • datagridRefresh()
        • dispatchFilterRequestPromise()
    • （或）dispatchFilterRequestPromise()

gridView.html：

<button (click)="refresh()"
    global refresh
</button>
<clr-datagrid #dataGrid
              (clrDgRefresh)="datagridRefresh($event)">
  ...
    <clr-dg-row *ngFor="let dataItem of dataItems" [clrDgItem]="dataItem">
  ... 
   <clr-dg-footer>
      <clr-dg-pagination #pagination
                         [clrDgTotalItems]="total"
                         [hidden]="!total"
                         [clrDgPageSize]="DEFAULT_ITEMS_PER_PAGE">
...
      </clr-dg-pagination>
   </clr-dg-footer>
</clr-datagrid>

<cross-column-filter (changes)="filterChange($event);"
                          [filters]="filters">
</cross-column-filter>

gridView.component.ts：

dataItems: MyItem[];
readonly DEFAULT_ITEMS_PER_PAGE: number = 20;
private static readonly DEFAULT_START_INDEX: number = 0;

ngOnInit() {
  if (hasPredefinedFilters) {
     this.filters = this.predefinedFilters;
  }
  this.refreshSubscription = this.refreshSubject
        .subscribe(async (state: ClrDatagridStateInterface) => {
           await this.dispatchFilterRequestPromise(state);
        });
}

filterChange(filters: FilterItem[]) {
  this.filters = filters;
  // If total is changed to a smaller value when the current page is > 1, the clrDgRefresh event is fired which
  // leads to an additional request.
  // The following code solves that and ensures the current page is 1 when applying filter.
  if (this.state && this.state.page && this.state.page.from &&
        this.state.page.from > gridView.DEFAULT_START_INDEX) {
     $(".pagination-first").click();
  } else {
     this.refreshSubject.next(this.state);
  }
}


refresh() {
    this.additionalCalls();
    this.dispatchFilterRequestPromise(this.state);
}

additionalCalls() {
...
}


datagridRefresh(state: ClrDatagridStateInterface) {
  // Remember the last state to use it again when the global refresh button is clicked
  this.state = state;
  // clrDgRefresh event is fired on initial load and each filtering/paging operation.
  // It's not needed to fetch data on initial grid load because this is done when global refresh handler is attached.
  if (this.gridFirstRefresh) {
     this.gridFirstRefresh = false;
     this.refresh();
  } else {
     this.loading = true;
     this.refreshSubject.next(state);
  }
}

dispatchFilterRequestPromise = (state: ClrDatagridStateInterface): Promise<void> => {

  const requestFilters: MyFilterSpec = this.createRequestFilters(state);
  if (requestFilters) {
    this.dataService.getDataItems(ManagedObject.contextObject, requestFilters).then(result => {
        this.dataItems = result.dataItems;
        this.total = result.total;});
  } else {
     this.dataItems = [];
     this.total = 0;
     return null;
  }
};

• 我在 clrDgRefresh（即 datagridRefresh）中有一个标志来区分初始加载和后续调用。我看到有一个与避免在初始加载时触发 clrDgRefresh 相关的错误 (clr-datagrid should not call clr-dgRefresh when it gets Destroyed/Initialized)。如果错误得到解决，我可以将该标志内的代码移动到 onInit 事件，但我看到该问题已在 2 年前打开，不确定是否有任何进展。

• 另一个问题与触发自定义过滤器更新（即 filterChange()）有关。

  • 通常，如果在当前页面大于 1 时将 total 更改为较小的值，则会触发 clrDgRefresh 事件，从而导致额外的请求。这是个问题吗？
  • 如果满足上述条件，我以编程方式单击第一页以触发 clrDgRefresh，否则调用 dispatchFilterRequestPromise()。有没有更好的方法来处理它？ 我发现有一些与绑定过滤器（[NG] Ability to set the state of a datagrid with a single input 和 Add [(clrDgFiltered)] to expose items in Datagrid matching current filters）相关的问题，如果实施可能会改进当前代码。

• 我想知道使用自定义寻呼机进行客户端绑定是否会使代码看起来比当前方法更清晰。

Answer 1

如果您开始使用此绑定，Clarity Datagrid 会自动调用clrDgRefresh。没有办法处理/避免这些调用。但是，如果我们在函数datagridRefresh() 之前添加去抖动，那么我们可以使用标志来控制它。请查看此stackblitz link

其次，还有一个issue 使用clrDgRefresh，它不会在相应组件的ngDestroy 上立即销毁，因此它会在路由更改事件中多次调用处理程序。同样，可以通过与上述相同的解决方法解决此问题（请参阅 stackblitz）