Angular Ag-Grid中paginationPageSizeSelector绑定报错求助

问题原因 #

在Ag-Grid v30.0.6版本中，paginationPageSizeSelector并非ag-grid-angular组件的直接输入属性，无法通过[paginationPageSizeSelector]这种方式直接绑定，必须将其配置到Grid Options中。

修正步骤 #

1. 在TypeScript中配置Grid Options #

将分页相关配置整合到gridOptions对象中：

import { Component } from '@angular/core';
import { GridOptions } from 'ag-grid-community';

@Component({
  selector: 'app-your-grid',
  templateUrl: './your-grid.component.html'
})
export class YourGridComponent {
  gridOptions: GridOptions = {
    pagination: true,
    paginationPageSize: 10,
    paginationPageSizeSelector: [10, 20, 50, 100],
    // 其他网格配置项...
  };
}

2. 在HTML模板中绑定Grid Options #

修改模板，移除单独的分页属性绑定，改用[gridOptions]统一绑定配置：

<ag-grid-angular
  [gridOptions]="gridOptions"
  <!-- 其他必要属性（如rowData、columnDefs等） -->
>
</ag-grid-angular>

替代方案：拆分绑定（可选） #

如果不想使用完整的gridOptions对象，也可以保留单独的分页属性绑定，同时通过gridOptions补充分页选择器配置：

<ag-grid-angular
  [pagination]="true"
  [paginationPageSize]="10"
  [gridOptions]="{ paginationPageSizeSelector: [10, 20, 50, 100] }"
  <!-- 其他网格属性 -->
>
</ag-grid-angular>

验证要点 #

• 确保ag-grid-angular与ag-grid-community版本一致（均为30.0.6），避免版本不兼容。
• 确认已启用分页（pagination: true），否则分页下拉框不会显示。

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