在 onCellValueChanged 事件中将值更改回原始值

Question

在我的 ag-grid 中，我将数据网格中的所有输入发送回 API 以将它们保存在数据库中。如果发生任何错误，我希望恢复更改。

我的问题是：发生了一个循环，我不确定我的代码是否是实现 API 更新并恢复到原始值的最佳方法。

是否可以在不再次触发 onCellValueChanged 的情况下更新网格值以避免任何循环？

这是进行 API 更新并在失败时恢复的最优雅的方式吗？

async function onCellValueChanged(event: CellValueChangedEvent) {
  if (event.newValue !== event.oldValue && event.node.rowPinned !== 'top') {
    try {
      const row_id = event.data.id;
      const [metric, period] = event.column.getColId().split('_');
      if (!row_id || !metric || !period) {
        throw new Error('Invalid data');
      }
      const value = event.newValue;
      const data = {
        salesplanningrow_id: row_id,
        metric: metric,
        period: period,
        value: value
      };
      const response = await $api.salesplanning.updateSalesPlanningValue(data);
    } catch (error) {
      console.error('Error updating data:', error);
      // Revert cell value if update failed
      event.node.setDataValue(event.column.getColId(), event.oldValue);
    }
  }
}

Answer 1

在 ag 网格中撤消编辑的另一种方法是使用撤消/重做 api：

event.api.undoCellEditing();

https://www.ag-grid.com/angular-data-grid/undo-redo-edits/#reference-UndoRedo-undoCellEditing