Angular ngFor循环内如何实现ag-grid组件动态gridReady事件名绑定

问题原因 #

Angular模板的事件绑定是编译期静态解析的，不支持运行时动态拼接函数名作为事件处理方法，你尝试的字符串拼接写法不会被Angular识别为合法的函数调用，因此无法生效。

可行解决方案 #

方案1：统一事件入口+索引传参（最推荐） #

不需要动态绑定多个不同的事件名，只需要绑定同一个处理函数，把ngFor的索引作为额外参数传入，在函数内部根据索引分发到对应的处理逻辑即可。

模板代码：

<div *ngFor="let item of Collection; let i = index">              
    <ag-grid-angular 
        (gridReady)="onGridReady($event, i)"
        <!-- 其余ag-grid配置项保持不变 -->
    >
    </ag-grid-angular> 
</div>

组件TS代码：

你可以用switch分支手动分发，也可以用动态属性调用简化代码：

import { GridReadyEvent } from 'ag-grid-community';

@Component({
  // 组件配置
})
export class YourComponent {
  // 原有已定义的处理函数
  onGridReady1(params: GridReadyEvent) { /* 第一个表格逻辑 */ }
  onGridReady2(params: GridReadyEvent) { /* 第二个表格逻辑 */ }
  onGridReady3(params: GridReadyEvent) { /* 第三个表格逻辑 */ }

  // 统一事件入口
  onGridReady(params: GridReadyEvent, index: number) {
    // 索引从0开始，对应你命名的1开头的函数名所以+1
    const targetHandler = this[`onGridReady${index + 1}` as keyof this];
    if (typeof targetHandler === 'function') {
      targetHandler.call(this, params);
    }
  }
}

方案2：封装子组件（适合表格逻辑差异大的场景） #

如果每个ag-grid的业务逻辑差异很大，可以把ag-grid封装为独立子组件，每个子组件内部自己处理gridReady事件，父组件只需要循环传入配置即可，更符合Angular组件解耦的设计原则。

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