具有无限 rowModelType 问题的 AG Grid 26.0.0 Angular 12.2 服务器端分页

Posted 2023-03-28

【中文标题】具有无限 rowModelType 问题的 AG Grid 26.0.0 Angular 12.2 服务器端分页

【英文标题】：AG Grid 26.0.0 Angular 12.2 Server Side Pagination with Infinite rowModelType issue

【发布时间】：2021-11-19 03:51:09

【问题描述】：

我已经使用无限 rowModel 创建了带有服务器端分页的 AG Grid，并且一切正常。我也实现了页面大小更改，但是当我更改大小并向下滚动时，我看到了一个奇怪的行为（似乎它再次获得相同的项目并显示它们）

<div class="example-header">
  Page Size:
  <select (change)="onPageSizeChanged($event)" id="page-size">
    <option value="50" selected="">50</option>
    <option value="100">100</option>
    <option value="250">250</option>
  </select>
</div>
<ag-grid-angular #customersGrid
                 style="width: 1600px; height: 800px;"
                 class="ag-theme-balham"
                 (firstDataRendered)="onFirstDataRendered($event)"
                 [rowData]="rowData"
                 [columnDefs]="columnDefs"
                 [gridOptions]="gridOptions"
                 [pagination]="true"
                 [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
                 [infiniteInitialRowCount]="infiniteInitialRowCount"
                 (gridReady)="onGridReady($event)"
                 (paginationChanged)="onPaginationChanged($event)"
>
</ag-grid-angular>

这是打字稿代码

@ViewChild(`customersGrid`) customersGrid: AgGridAngular

  gridOptions: Partial<GridOptions>;
  gridApi : any;
  gridColumnApi : any;
  columnDefs : any;
  cacheOverflowSize: number = 2
  maxConcurrentDatasourceRequests: number = 1;
  infiniteInitialRowCount: number = 2;

  rowData: Customer[] = [];
  dataSource: any;


  constructor(private customersService: CustomerService) 
    this.columnDefs = [
       headerName: `Id`, field: `id`, sortable: true,
      
        field: 'id',
        headerName: ``,
        cellRenderer: 'btnCellRenderer',
        cellRendererParams: 
          label: 'Edit',
          clicked: function(field: any) 
            alert(`$field was clicked`);
          ,
        ,
      ,
      
        field: 'id',
        headerName: ``,
        cellRenderer: 'btnCellRenderer',
        cellRendererParams: 
          label: 'Delete',
          clicked: function(field: any) 
            alert(`$field was clicked`);
          ,
        ,
      

    ]

    this.gridOptions = 
      headerHeight: 45,
      rowHeight: 30,
      cacheBlockSize: 50,
      paginationPageSize: 50,
      rowModelType: `infinite`,
      frameworkComponents: 
        btnCellRenderer: BtnCellRenderer,
      
    
    


  onGridReady(params: any) 
    this.gridApi = params.api;
    this.gridColumnApi = params.gridColumnApi;

    this.dataSource = 
      getRows: (params: IGetRowsParams) => 
        this.customersService.getCustomers(params, this.gridApi.paginationGetPageSize()).subscribe(customers => 
          params.successCallback(customers['genericModel'], customers['count'])
          console.log(customers);
        );
      
    

    this.gridApi.setDatasource(this.dataSource);
  

  onPaginationChanged(params: any) 
  

  onPageSizeChanged(event: any) 
    this.gridApi.paginationSetPageSize(event.target.value);
  



  onFirstDataRendered(params: any) 
    params.api.sizeColumnsToFit();
  

在我发布的 github 问题中，有一个问题的视频 https://github.com/ag-grid/ag-grid/issues/4687

注意：此问题仅在更改页面大小时发生 - 如果我从一个页面大小开始 [比如说 250] 并且不更改它（假设缓存大小相同 - 它可以正常工作）

【参考方案1】：

好的，这似乎解决了我的问题（经过修改）Changing page and cache block size on ag-grid causes infinite loading of items

onPageSizeChanged(event: any) 
    this.gridApi.rowModel.cacheParams.blockSize = event.target.value;
    this.gridApi.gridOptionsWrapper.setProperty('cacheBlockSize', event.target.value);
    this.gridApi.paginationSetPageSize(event.target.value);
    this.gridApi.purgeInfiniteCache();