ag-grid - 在更改 ag-grid 表之前等待后端服务响应

Question

我正在使用 ag-grid/ag-grid-angular 来提供由数据库支持的可编辑数据网格。当用户编辑单元格时，我希望能够将更新发布到后端服务，如果请求成功，则更新网格，如果没有撤消用户的更改并显示错误。

我从几个不同的角度解决了这个问题，但还没有找到满足我所有要求的解决方案，而且我也很好奇实现这种功能的最佳实践是什么。

我的第一个想法是利用 cellValueChanged 事件。通过这种方法，我可以查看旧值和新值，然后调用我的服务来更新数据库。如果请求成功，那么一切都很好并且按预期工作。但是，如果请求由于某种原因失败，那么我需要能够撤消用户的更改。由于我可以访问旧值，因此我可以轻松地执行一些操作，例如event.node.setDataValue(event.column, event.oldValue)还原用户的更改。但是，由于我再次更新网格，这实际上会再次触发 cellValueChanged 事件。我无法知道这是撤消用户更改的结果，因此即使原始请求从未成功更新数据，我也不必要地再次调用我的服务来更新数据。

我还尝试使用自定义单元格编辑器在用户完成编辑单元格和实际更新网格之间进行切换。但是，似乎没有办法在这些类中的任何一个中集成异步方法，以便能够等待来自服务器的响应来决定是否实际应用用户的更改。例如

isCancelBeforeStart(): boolean {
    this.service.updateData(event.data).subscribe(() => {
      return false;
    }, error => {
      return true;
    });
}

不起作用，因为此方法是同步的，我需要能够等待服务的响应，然后再决定是否取消编辑。

有什么我遗漏或没有考虑到的吗？或者另一种方法来解决这个问题以获得我想要的功能？我意识到这可以通过专用的编辑/保存按钮更容易处理，但理想情况下，我正在寻找一个交互式网格，当用户进行更改时将更改保存到后端，并在出现问题时提供反馈。

非常感谢任何帮助/反馈！

标签： ag-gridag-grid-angular

Answer 1

我了解您要做什么，并且我认为最好的方法是在每个可编辑列上使用“valueSetter”函数。

使用 valueSetter，网格的值不会直接更新 - 您必须更新绑定数据以使其反映在网格中。

当在编辑结束时网格调用 valueSetter 时，您可能希望以某种方式记录原始值，更新绑定数据（以便网格反映更改），然后启动后端保存，并立即从 valueSetter 函数返回。

（重要的是立即从 valueSetter 函数返回以保持网格响应。由于来自网格的 valueSetter 调用是同步的，如果您尝试等待服务器响应，您将在等待时锁定网格.)

然后，如果后端更新成功，则无事可做，如果失败，您可以更新绑定的数据以反映原始值。

使用此方法，您将不会遇到监听 cellValueChanged 事件的问题。

您可能必须处理的一个问题是，如果用户更改单元格值，然后在第一次后端保存返回之前再次更改它，该怎么办。