Angular中如何获取ag-grid明细表点击单元格的数据？

子表点击事件不生效的核心原因：ag-grid的明细表是独立渲染的Grid实例，和主表实例完全隔离，主表绑定的单元格事件不会作用到子表，所有子表的事件、配置都需要在子表专属配置项中单独声明，这部分逻辑不属于Master-Detail专属API，因此基础主从表文档中没有单独说明。

具体实现步骤：

• 在主表配置的detailCellRendererParams节点下，通过detailGridOptions给子表绑定onCellClicked事件，这是子表配置的唯一入口，写在主表同级的事件不会对子表生效，事件回调的参数会携带当前点击单元格的完整数据
• 保留原有子表数据加载逻辑即可，不需要修改现有主从表数据传参逻辑

参考实现代码：

// 主表全局配置
const masterGridOptions = {
  masterDetail: true,
  // 其余主表通用配置（列定义、数据源等）保持不变
  detailCellRendererParams: {
    // 子表专属配置全部写在detailGridOptions下
    detailGridOptions: {
      columnDefs: [
        // 子表列定义保持原有配置即可
      ],
      // 关键：绑定子表单元格点击事件
      onCellClicked: (cellParams) => {
        // 直接从回调参数中取需要的单元格数据
        const cellValue = cellParams.value // 即点击单元格的具体值，比如示例场景中的579
        const currentRowData = cellParams.data // 单元格所在子表行的完整行数据
        const columnField = cellParams.colDef.field // 单元格对应绑定的字段名
        // 如果需要获取当前子表所属的主表行数据，直接从上下文取即可
        const parentMasterRow = cellParams.api.getContext().masterRowNode?.data
        // 在此处编写点击后的自定义业务逻辑
      }
    },
    // 原有子表数据加载逻辑保留
    getDetailRowData: (params) => {
      params.successCallback(params.data.detailList)
    }
  }
}

注意事项：

1. 不要在主表实例上绑定onCellClicked尝试捕获子表点击，主表事件只会响应主表自身的单元格操作
2. 使用Angular/React/Vue等框架的ag-grid适配包时，不要把单元格点击事件绑定在主表格组件的事件输出上（比如Angular的(cellClicked)、React的onCellClicked组件属性），这类绑定只会作用于主表，必须嵌套写在detailGridOptions中才能对子表生效
3. 不要通过全局下标/变量记录当前展开的主表行来关联子表数据，展开多张子表、滚动虚拟加载时会出现数据错位，直接从子表实例上下文取主表节点的方式是框架原生维护的，不会出现错位问题。

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