Angular中Ag Grid 25.3.0服务端分页实现问题求助

核心问题 #

1. 初始数据源未生效：onGridReady执行时dataSource尚未创建，调用setDatasource传入的是未定义值，Grid不会触发getRows方法。
2. 搜索后未同步数据源：doSearch中创建了新的dataSource，但未通知Grid重新加载数据源，导致Grid无法感知到搜索条件变化。
3. 未利用分页参数：getRows方法没有使用Ag Grid提供的startRow、endRow分页参数，无法实现真正的服务端分页逻辑。
4. 冗余rowData绑定：无限行模型下，Grid会自行管理数据，手动绑定rowData会干扰数据源的正常加载流程。

修正后的代码 #

HTML部分

移除[rowData]="dataSource.content"，无限行模型无需手动绑定rowData：

<ag-grid-angular #agGrid 
   class="ag-theme-alpine" 
   domLayout="autoHeight" 
   [columnDefs]="columns"
   [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"
>
</ag-grid-angular>

<button (click)="doSearch()"> Search </button>

TS部分

import { Component, ViewChild } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { GridOptions, IGetRowsParams } from 'ag-grid-community';
import { FormBuilder } from '@angular/forms';

@Component({
  // 组件元数据自行补充
})
export class YourComponent {
  @ViewChild(AgGridAngular) agGrid!: AgGridAngular;
  
  gridOptions: GridOptions = {
    pagination: true,
    rowModelType: 'infinite',
    cacheBlockSize: 10,
    paginationPageSize: 10,
    cacheQuickFilter: true
  };

  form = this.fb.group({
    entityCode: [{ value: null, disabled: true }],
    businessUnitId: [null],
    firstName: [null],
    lastName: [null],
    mail: [null],
    isActive: [null],
  });

  // 提前初始化数据源，避免onGridReady时传入空值
  dataSource = {
    getRows: (params: IGetRowsParams) => {
      params.successCallback([], 0);
    }
  };

  constructor(private fb: FormBuilder, private _userService: YourUserService) {}

  doSearch() {
    const formClone = this.form?.getRawValue();

    // 更新数据源的getRows逻辑，携带分页参数
    this.dataSource = {
      getRows: (params: IGetRowsParams) => {
        // 转换分页参数：page从0开始计数
        const page = params.startRow / params.paginationPageSize;
        const pageSize = params.paginationPageSize;

        // 传递搜索条件+分页参数给后端
        this._userService.getUsers({
          ...formClone,
          page,
          pageSize
        }).subscribe({
          next: (data) => {
            params.successCallback(data.content, data.totalElements);
          },
          error: (err) => {
            params.failCallback();
            console.error('用户数据加载失败:', err);
          }
        });
      }
    };

    // 通知Grid加载新数据源，跳回第一页
    this.agGrid.api.setDatasource(this.dataSource);
    this.agGrid.api.paginationGoToPage(0);
  }

  onGridReady(params: any) {
    this.agGrid.api.setDatasource(this.dataSource);
  }
}

关键说明 #

• 无限行模型机制：Ag Grid的infinite行模型会根据分页操作自动调用getRows，并传入当前需要的起始/结束行参数，后端需根据这些参数返回对应页的数据。
• 数据源更新逻辑：每次搜索后必须调用setDatasource，让Grid感知到数据源变化，重新触发数据加载。
• 错误处理：必须调用params.failCallback处理请求失败场景，避免Grid一直处于加载状态。

内容的提问来源于stack exchange，提问作者unitestangular