如何在角度轮询期间保持过滤器完好无损？答案

【问题标题】：How to keep filter intact during polling in angular?如何在角度轮询期间保持过滤器完好无损？
【发布时间】：2021-05-14 23:05:49
【问题描述】：

<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(){
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');
  }
}

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

【问题讨论】：

标签： angular angular-material ag-grid polling ag-grid-angular

【解决方案1】：

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

filterParams: {
    newRowsAction: 'keep'
}

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

来自documentation：

建议在过滤器上设置newRowsAction='keep' 添加新行时保留现有过滤器选择的参数

Demo

【讨论】：