Ag-Grid：如何在单击单元格时获取单元格的值

Answer 1

监听cellClicked事件https://www.ag-grid.com/angular-data-grid/grid-events/

<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>

onCellClicked(cellData){
  console.log(cellData.value)
}

Answer 2

我找到了更好的方法来完成这件事。为了保持代码整洁和有条理，我在 AG Grid 中使用了一个常量文件作为 columnDefs 配置。

 import { CellClickedEvent } from 'ag-grid-community';
export const columnSettings = (componentInstance: any) => [
  {
    field: "name",
    minWidth: 120,
    enableRowGroup: true,
    headerName: "Ticker",
    onCellClicked: (event: CellClickedEvent) => componentInstance.onHistorySearch(event.value),
  }]

在使用 AG Grid 的组件内，创建一个在单击列时执行的函数。另外，将 columnSettings 常量导入到您的组件中。

export class MyComponent {
  public columnDefs: any[] = [];

  constructor() {
    // Pass 'this' to the imported column settings function
    this.columnDefs = columnSettings(this);
  }

  // The method you want to call when cell clicked
  public  onClickedOnColumn(value: string): void {   
     console.log(value);
   }
}