angular - 如何在 Angular 轮询期间保持过滤器完好无损？

Question

<div class="device-view">
  <mat-toolbar>
    <span class="device-list-label">Device List</span>
  </mat-toolbar>
  <div class="device-list">
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      class="ag-theme-material"
      (gridReady)="onGridReady($event)"
      [suppressDragLeaveHidesColumns]="true"
      [frameworkComponents]="frameworkComponents"
      (columnResized)="onColumnResized($event)"
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColumnDefs"
      [enableSorting]="true"
      [enableFilter]="true"
      [animateRows]="true"
      [rowHeight]="32"
      [headerHeight]="35"
      [suppressRowClickSelection]="true"
      [rowSelection]="rowSelection"
      (selectionChanged)="onSelectionChanged()"
      (filterChanged)="onFilterChanged($event)"
      [modules]="modules"
    </ag-grid-angular>
  </div>
</div>

这是我的轮询代码。我正在 ngOnit() 中调用 update 方法。

update(){
this.timeInterval = interval(10000)
  .pipe(
    startWith(0),
    switchMap(() => this.deviceService.getDeviceList())
  )
  .pipe(
    takeUntil(this.deviceService.flag$),
    repeatWhen(() => this.deviceService.flag$)
  )
  .subscribe((success: any) => {
    this.gridApi?.setRowData(this.updatedData);
    this.restoreFilterModel(); 
    this.updatedData = success;
    console.log("test")
  }, retry(2));
}

这些是在新数据到来时恢复过滤器状态并应用过滤器模型的方法。

saveFilterModel() {
    this.savedFilterModel1 = this.gridApi.getFilterModel();
    const keys = Object.keys(this.savedFilterModel1);
    const savedFilters = keys.length > 0 ? keys.join(', ') : '(none)';
    document.querySelector('#savedFilters').innerHTML = savedFilters;
}

onFilterChanged(event: any) {
  this.savedFilterModel1 = this.gridApi.getFilterModel();
  const keys = Object.keys(this.savedFilterModel1);
  const savedFilters = keys.length > 0 ? keys.join(', ') : '(none)';

}

restoreFilterModel() {
  if (this.gridApi) {
    this.gridApi.setFilterModel(this.savedFilterModel1);
    this.gridApi.refreshClientSideRowModel('filter');
  }
}

问题是有轻微的闪烁，当数据到来时，屏幕首先显示整个数据，然后过滤数据。我该如何避免闪烁。我需要在代码中进行哪些更改？

Answer 1

您正在手动保存和恢复过滤器，您不需要这样做。您缺少的是以下列定义代码:

filterParams: {
    newRowsAction: 'keep'
}

因此，将上述代码添加到您的 defaultColumnDefs 中，以便将其应用于每一列。

来自documentation :

It is recommended that newRowsAction='keep' is set on the filter params to keep existing filter selections when new rows are added

Demo