ag-grid-angular addEventListener怎么监听数据变化

在ag-Grid Angular中，如果你想要监听数据的变化，你可以通过`ag-Grid`提供的`gridReady`事件以及`cell值改变`事件来实现。首先，在组件中需要注入`AgGridAngular`服务，并在`gridReady`回调函数中设置监听器。

以下是步骤：

1. 在组件的构造函数里注入`AgGridAngular`服务：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AgGridAngular } from 'ag-grid-community-angular';

@Component({
  selector: 'app-my-grid',
  template: `
    <ag-grid-angular
      #agGrid
      [rowData]="data"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
  `,
})
export class MyGridComponent implements OnInit, OnDestroy {
  private gridApi: any;
  private colDefApi: any;

  // ... 其他组件变量

  constructor(private agGridAngular: AgGridAngular) {
    // ...
  }
}

2. 定义`onGridReady`方法，在这里初始化网格API并添加数据变化监听：

ngOnInit() {
  this.gridApi = this.agGridAngular.getApi();
  this.gridApi.addEventListener('cellValueChanged', this.onCellValueChanged.bind(this));
}

// ... 其他生命周期钩子和方法

private onGridReady(params) {
  this.gridApi = params.api; // 获取grid API
  this.colDefApi = params.columnApi; // 获取列定义API

  // 数据发生变化时会触发cellValueChanged事件
}

private onCellValueChanged(params) {
  const { rowNode, colDef, newValue, oldValue } = params;
  console.log(`Data for row ${rowNode.data.id} in column ${colDef.colId} changed from ${oldValue} to ${newValue}`);
}

在这个例子中，当你网格中的单元格数据发生改变时，`onCellValueChanged`方法会被调用，你可以在这里处理数据更新后的逻辑。