Angular中ag-grid自定义聚合函数无法调用其他函数的问题

问题根源在于函数上下文丢失：当你把this.agg_func赋值给列定义的aggFunc时，ag-grid执行这个函数时，this的指向不再是你的Angular组件实例。此时在agg_func内部直接调用another_func()，会因为找不到这个方法抛出错误，导致ag-grid的聚合逻辑中断，网格无法渲染。

两种解决方法： #

方法1：用箭头函数定义聚合函数

箭头函数会自动捕获当前组件的this上下文，确保内部可以正常访问组件的方法：

// 改为箭头函数
agg_func = (params: any) => {
    // ... 你的聚合逻辑
    this.another_func(); // 必须通过this调用组件方法
    // ... 剩余聚合逻辑
}

another_func() {
    console.log('Hello?');
}

column_defs = [
    {headerName: 'A', field: 'many_As', rowGroup: true },
    {headerName: 'B', field: 'many_Bs', width: 250, aggFunc: this.agg_func },
];

方法2：用bind强制绑定上下文

如果想保持普通函数的写法，在赋值aggFunc时用bind把组件实例的this绑定到聚合函数上：

column_defs = [
    {headerName: 'A', field: 'many_As', rowGroup: true },
    // 绑定this到组件实例
    {headerName: 'B', field: 'many_Bs', width: 250, aggFunc: this.agg_func.bind(this) },
];

agg_func(params: any) {
    // ... 你的聚合逻辑
    this.another_func(); // 通过this调用组件方法
    // ... 剩余聚合逻辑
}

another_func() {
    console.log('Hello?');
}

注意点 #

无论用哪种方法，在agg_func内部调用组件方法时，都必须加上this.，因为组件的方法是实例成员，必须通过实例访问。

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