AG Grid 30.0.2（Angular）配置paginationPageSizeSelector报错求助

问题分析 #

AG Grid 30.x版本对paginationPageSizeSelector的类型定义做了严格化处理，直接传递纯数字数组（如[10,20,30]）会触发Angular的类型检查错误，无论手动写死数组还是通过变量绑定都无法绕过这个校验。

解决方法 #

方法1：使用标准配置对象数组

按照AG Grid官方规范，将数字数组替换为包含value和label属性的对象数组：

1. 在组件类中定义配置变量：

pageSizeOptions = [
  { value: 10, label: '10条/页' },
  { value: 20, label: '20条/页' },
  { value: 30, label: '30条/页' }
];

2. 模板中绑定该变量：

<ag-grid-angular class="ag-theme-alpine"  
    [columnDefs]="columnDefs"
    [pagination]="true"
    [paginationPageSize]="pageSize" 
    [paginationPageSizeSelector]="pageSizeOptions"
    [rowHeight]="45"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData" 
    [animateRows]="true" 
    [rowModelType]="rowModelType"
    (gridReady)="onGridReady($event)"
    (firstDataRendered)="onFirstDataRendered($event)" 
    [cacheBlockSize]="cacheBlockSize"
    [enableRangeSelection]="true">
</ag-grid-angular>

方法2：临时绕过类型检查

如果需要快速验证功能，可使用$any()语法跳过Angular的类型校验：

[paginationPageSizeSelector]="$any([10,20,30])"

方法3：统一AG Grid版本

检查项目中@ag-grid-community/angular和@ag-grid-community/core的版本是否均为30.0.2，版本不匹配会引发类型定义冲突，执行以下命令统一版本：

npm install @ag-grid-community/angular@30.0.2 @ag-grid-community/core@30.0.2 --save

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