AGGrid Angular：如何调用editable属性的回调函数获取布尔值？

问题描述 #

我在AGGrid的列定义中将editable设为了一个回调函数：

{
  colId: 'Bound',
  headerName: 'Bound',
  field: 'bound',
  sortable: true,
  editable: (params: ColumnFunctionCallbackParams) => {
    return !params.useDefaultBound;
  },
  tooltipField: 'Upper Bound',
  filter: 'agSetColumnFilter',
  filterParams: {
    values: ['Low', 'Medium', 'High'],
  },
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: {
    values: ['Asset', 'Low', 'Medium', 'High'],
  },
},

但当我尝试访问该属性获取布尔值时，控制台输出的是整个回调函数体而非预期的true或false，现有代码如下：

console.log(colDef.editable);

if (colDef?.editable) {
   menuItems.push(...customMenuItems);
}

请问如何调用这个回调函数以获取对应的布尔值？

解决方法 #

因为你把editable定义成了回调函数而非直接的布尔值，所以直接访问colDef.editable只会拿到函数本身。要获取布尔结果，你需要手动调用这个函数并传入符合ColumnFunctionCallbackParams类型的参数：

1. 在Grid事件/渲染逻辑中调用
   如果你的代码处于Grid的事件回调（比如onCellClicked、onCellEditingStarted）或单元格渲染相关逻辑里，可以直接传入Grid提供的params对象：

// 示例：在Grid事件中获取params并调用
const isEditable = colDef.editable(gridParams);
console.log(isEditable); // 输出true或false

2. 手动构造参数调用
   如果需要针对特定行或场景判断，构造包含回调依赖属性的参数对象即可（你的回调依赖useDefaultBound属性）：

// 根据实际业务场景设置useDefaultBound的值
const customParams = {
  useDefaultBound: false 
};
const isEditable = colDef.editable(customParams);

3. 调整判断逻辑
   原代码中的if (colDef?.editable)会始终为true（因为函数是真值），需要改成调用函数后的结果判断：

// 传入对应的params对象
const isEditable = colDef.editable(yourParams);
if (isEditable) {
  menuItems.push(...customMenuItems);
}

注意：确保传入的参数包含回调函数所需的所有属性，否则可能引发报错。比如你的回调依赖params.useDefaultBound，必须保证该属性存在且有有效值。

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