ag-grid 的主详细信息中的 CellValueChanged 事件答案

【问题标题】：CellValueChanged event in master detail of ag-gridag-grid 的主详细信息中的 CellValueChanged 事件
【发布时间】：2019-11-28 09:54:33
【问题描述】：

我正在开发一个主明细设置为 true 的 ag-grid，主明细的第一行有一个可编辑的单元格，即“contractID”，我想根据获取的 contractID 填充主明细的其他单元格.

我尝试在 columnDef 中添加 cellValueChanged 并尝试在 detailGrid 的 onFirstDataRendered 方法中显式设置 params.api.rowModel.gridApi.cellValueChanged，但没有找到运气。

主从网格代码：

detailCellRendererParams = {
  detailGridOptions: {
    columnDefs: [
      { headerName: "Contact ID", field: "contractId", editable: true, [cellValueChanged]: "cellValueChanged()" },
      { headerName: "Contact Name", field: "contractName" },
      { headerName: "Category", field: "category" }]
  }
}

onFirstDataRendered(params) {
  params.api.rowModel.gridApi.cellValueChanged = function (params) {
    console.log("cellChanged");
  }
}

【问题讨论】：

标签： javascript ag-grid ag-grid-angular

【解决方案1】：

如果有人仍然想知道，在 detailGridOptions 添加：

onCellValueChanged: function ($event) {
          // your code here
        },

每次更改单元格值时都会触发。

【讨论】：

【解决方案2】：

修复了使用自定义 cellRenderer 的问题，并为更改事件添加了一个 eventListener。我只是想在网格的第一行有这个功能，所以在 rowIndex 中添加了一个条件。

detailCellRendererParams = {
    detailGridOptions: {
        columnDefs: [{headerName: "Contact ID",field: "contractId",editable: true,
                cellRenderer: (params) => {
                    params.eGridCell.addEventListener('change', (e) => {
                        this.getDetails(e.target.value);
                    })
                },
                {headerName: "Contact Name", field: "contractName"},
                {headerName: "Category",field: "category"}]
        }
    }

 getDetails(id): void {
    this.apiService.getDetails(id)
      .subscribe(result => {
        this.gridApi.detailGridInfoMap.detail_0.api.forEachNode(node=> {
            if(node.rowIndex == 0){
              node.data = result;
              node.gridApi.refreshCells();
            }}
          );
      })}

【讨论】：