在 ag-grid 中编辑单元格值后如何启动方法？答案

【问题标题】：How to launch a method after a cell value has been edited in ag-grid?在 ag-grid 中编辑单元格值后如何启动方法？
【发布时间】：2019-09-25 22:37:12
【问题描述】：

我有这个简单的专栏：

这是它的定义：

{
      headerName: "Activité",
      field: "activite",
      editable: true,
       , cellClass: "cell-wrap-text"
      }

这是每次用户在该列中输入新输入时我想要启动的方法。

  public UpdateActValue() {
      this.data.sendActToBia(this.params.data.activite);
      }

这是我的问题：
1/ 在编辑列中的单元格值后，是否有任何 ag-grid “本机”方式来启动特定方法？
2/ 我是否应该简单地定义一个自定义单元格渲染器并在那里完成所有必要的工作？
谢谢！

【问题讨论】：

标签： angular ag-grid ag-grid-react ag-grid-ng2 ag-grid-angular

【解决方案1】：

您可以利用cellValueChanged 事件绑定来检测单元格值的变化。

在您的component.html 上，您可以简单地将onCellValueChanged() 方法绑定到cellValueChanged 事件。

<ag-grid-angular 
.
.
(gridReady)="onGridReady($event)"
(cellValueChanged)="onCellValueChanged($event)"
>

在您的 component.ts 上，您将定义 onCellValueChanged() 方法，每次任何单元格值发生更改时都会触发该方法。

onCellValueChanged(event) {
  // handle the rest here
}

您可以通过here 阅读有关网格单元编辑和更改检测的更多信息。

【讨论】：

谢谢，我刚刚发布了一个完整的答案。就像你的一样，但有一个小细节来检测哪一列受到了更改的影响。谢谢！
顺便说一句，您知道我如何检测更改发生在哪一行吗？就像我在哪一列中检测到的一样？
@AhmedGhrib 是的，您也可以为此目的使用cellValueChanged。在同样的方法上，您可以通过执行event.rowIndex 来检测更改行的索引。
我找到了一个简单的方法：params.node.id 和同一个事件监听器。再次感谢您

【解决方案2】：

我刚刚找到了一个简单的方法来做到这一点。我希望它有所帮助。

在grid.component.html中：

在网格定义中添加：

  (cellValueChanged)="onCellValueChanged($event)"

在 grid.component.ts 中：定义方法：

onCellValueChanged(params) {
    const colId = params.column.getId();
    if (colId === "activite") {
      this.data.sendActToBia(params.data.activite);
}
  }

【讨论】：