Angular中点击Ag-Grid单元格时如何获取单元格值？

要实现点击Ag-Grid单元格时获取对应值，核心是利用Ag-Grid提供的cellClicked事件，具体步骤如下：

1. 修改HTML模板，绑定点击事件 #

在你的ag-grid-angular标签中添加cellClicked事件绑定，指定处理方法：

<ag-grid-angular  
    style="width: 100%; height: 300px;" 
    class="ag-theme-alpine"
    [rowData]="list" 
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [pagination]="true"
    [modules]="modules"
    (cellClicked)="onCellClicked($event)"
>
</ag-grid-angular>

2. 在组件类中实现事件处理方法 #

在对应的Angular组件TypeScript文件中，编写onCellClicked方法，通过事件对象获取单元格相关数据：

onCellClicked(event: any) {
    // 直接获取当前点击单元格的显示值
    const cellValue = event.value;
    // 获取当前点击行的完整数据对象
    const rowData = event.data;
    // 获取当前点击列的配置信息（比如字段名）
    const columnField = event.colDef.field;

    // 示例：打印获取到的数据
    console.log('点击的单元格值:', cellValue);
    console.log('当前行完整数据:', rowData);
    console.log('当前列对应的字段:', columnField);
}

可选：给特定列单独绑定点击事件 #

如果只需要监听某几列的点击事件，可以在columnDefs中为对应列单独设置cellClicked回调：

columnDefs = [
    { 
        field: 'productName', 
        headerName: '产品名称',
        // 仅点击该列时触发此回调
        cellClicked: (event) => {
            console.log('点击产品名称列，值为:', event.value);
        }
    },
    { field: 'price', headerName: '价格' },
    { field: 'stock', headerName: '库存' }
];

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