轮询：页面被刷新，任何指定的过滤器/排序顺序也被重置。我怎样才能防止这种情况发生？

Posted 2023-03-28

【中文标题】轮询：页面被刷新，任何指定的过滤器/排序顺序也被重置。我怎样才能防止这种情况发生？

【英文标题】：Polling: Page getting refreshed any filter/sorting order specified is also getting reset. How can i prevent this from happening?

【发布时间】：2021-05-12 18:32:50

【问题描述】：

我正在使用agGrid 在我的页面上显示 API 数据。我已经实施轮询以每 30 秒后定期获取数据。但是在每 30 秒刷新一次页面后，指定的任何过滤器/排序顺序也会被重置。我怎样才能防止这种情况发生？我想在自动刷新发生时保持过滤/排序不变。

  ngOnInit(): void 
    this.update(); //auto refresh method
    this.defaultColumnDefs = defaultColumnDefs;
    this.translator = this.i18Service.getTranslator();
    this.translator.translateObject.subscribe((item: any) => 
      this.locales = item;
    );
    this.columnDefs = deviceColumnDefs();
    this.getPatientVisitList();
    this.getPatientDeviceList();
    this.isRowSelected = false;

  

  
   //update method-- polling logic 

  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.rowData = success;
        console.log("hello")
      , retry(2));
    

  //This is the method I am calling in service.

  getDeviceList() 
    const endPointUrl = `$getServerUrl()/getDeviceResource`;
    return this.http.get(endPointUrl);
    
  

【问题讨论】：

整个页面刷新了吗？您在哪里设置/更新网格数据？

是的，我每 30 秒后轮询一次 api。在同一个组件中

您的页面不需要刷新，您可以在不刷新的情况下更新网格中的数据，因此您的过滤器和排序保持不变，Demo。

您能否详细说明我需要对当前代码进行哪些更改以保持排序和过滤器完好无损？

我当前的代码也在处理当我打开任何弹出窗口时停止计时器的情况

【参考方案1】：

如果你使用grid api来设置行数据就很简单了。

在模板中：

<ag-grid-angular [gridOptions]="gridOptions"></ag-grid-angular>

在组件中：

gridOptions: GridOptions = 
    columnDefs: this.columnDefs,
    rowData: this.rowData,
;

在您的 update() 方法中：

    subscribe((success: any) => 
        const model = this.gridOptions.api.getFilterModel(); // get the current filter state
        this.rowData = success; // new row data
        this.gridOptions.api.setRowData(this.rowData); // set row data using grid api
        this.gridOptions.api.setFilterModel(model); // set the filter
  

确保不要在模板中绑定rowData，不要这样做：

<ag-grid-angular [rowData]="rowData"></ag-grid-angular>

【参考方案2】：

您是否在使用与 AdapTable 集成的 ag-Grid？

如果是这样，那么您可以使用他们的 api 在刷新前获取当前的搜索和过滤状态，然后在刷新后立即应用它。或者，更简单的是，您可以在 Adaptable Options 中设置“reapplyFiltersOnGridSetData”。

【参考方案3】：

我在列定义中添加了这个属性，它开始正常工作。

filterParams: 
newRowsAction: 'keep'

我也在更新方法中这样做

.subscribe((success: any) => 
      this.gridApi?.setRowData(this.updatedData);
      this.updatedData = success;
    , retry(2));