Angular 16中ag-grid-community动态设置cellEditorParams的问题

我需要基于当前行数据动态设置AG Grid中agSelectCellEditor的下拉选项，选项需根据该行其他列的值生成，但两次尝试均出现错误：

尝试1：直接给values传函数 #

此时handleGridCellEvent能正常工作，但报类型错误：ERROR "TypeError: params.values.forEach is not a function"

const columnDefs: ColDef[] = [
  {
    headerName: '示例列',
    cellEditor: 'agSelectCellEditor',
    cellEditorParams: {
      // 报错：params.values.forEach is not a function
      values: (data) => this.getCellEditorValues(data),
      // 单元格事件能正常触发
      handleGridCellEvent: this.onCellChange.bind(this),
    },
    
  },
] as ColDef[];
this.tableOptions = { columnDefs, pagination: false }

尝试2：给cellEditorParams传函数 #

此时下拉选项能正常动态填充，但事件绑定报错：ERROR "TypeError: colDef.cellEditorParams.handleGridCellEvent is not a function"

const columnDefs: ColDef[] = [
  {
    headerName: '示例列',
    cellEditor: 'agSelectCellEditor',
    cellEditorParams: ({ data }) => {
      return {
        // 下拉选项正常生成
        values: this.getCellEditorValues(data),
        // 报错：colDef.cellEditorParams.handleGridCellEvent is not a function
        handleGridCellEvent: this.onCellChange.bind(this),
      }
    },
    
  },
] as ColDef[];
this.tableOptions = { columnDefs, pagination: false }

参考方法 #

private getCellEditorValues(data: any): string[] {
  // 根据行数据动态返回下拉选项数组
  return ['示例1', '示例2', '示例3']
}

private async onCellChange(data: any) {
  // 单元格值变化时的处理逻辑
  this.exampleService.processRequest(data);
}

解决方案 #

问题根源在于AG Grid的参数处理逻辑：

1. 尝试1中，values不能直接赋值为函数，AG Grid会将该函数当作选项数组遍历，因此触发forEach is not a function错误。
2. 尝试2中，cellEditorParams设为函数后，handleGridCellEvent属于列级事件绑定，不能放在动态返回的参数对象内，AG Grid会直接去作为函数的cellEditorParams上查找该方法，自然找不到。

正确实现方式：

• 将cellEditorParams设为函数，仅用于动态生成下拉选项
• 将handleGridCellEvent直接定义在列配置中，而非cellEditorParams内部

修改后代码：

const columnDefs: ColDef[] = [
  {
    headerName: '示例列',
    cellEditor: 'agSelectCellEditor',
    // 动态生成cellEditorParams，仅处理下拉选项
    cellEditorParams: ({ data }) => ({
      values: this.getCellEditorValues(data)
    }),
    // 事件绑定直接放在列定义中
    handleGridCellEvent: this.onCellChange.bind(this),
  },
] as ColDef[];
this.tableOptions = { columnDefs, pagination: false }

此写法既可以根据行数据动态生成下拉选项，又能正常触发单元格事件。

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