在角轮询期间如何保持过滤器完整?

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中，这样它就可以应用到每一列。

从文档:

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

演示