Ag-Grid 编辑数据并发送到服务器

Question

Ag-grid on angular 能够创建从本地 json 文件中获取数据的网格。 在编辑任何行时如何保存该数据，然后发送到服务器或可能的本地 json 文件？？

简而言之，Ag-Grid 如何在编辑后保存行数据并在单击提交按钮时发送到服务器。 任何人如果在 Javascript 上实现了这个，请发表评论，将尝试在 angular 上使用它

请告诉我除了 ag-grid 是否还有其他最佳选择来实现此功能

Answer 1

如果您想监听特定行的特定更改，您可以在组件模板上定义 ag-grid 组件时使用 onCellValueChanged 或 onRowValueChanged 事件绑定。

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

在您的 component.ts 上，每次您进行任何更改时都会触发 onRowValueChanged 方法

 export class YourComponent {
 private gridApi;
 private gridColumnApi;
   .
   . 
 onRowValueChanged: function(event) {
   console.log(event) // access the entire event object
   console.log(event.data) // access and print the updated row data
   const gridData = this.getAllData();
   // api call to save data

}

getAllData() {
  let rowData = [];
  this.gridApi.forEachNode(node => rowData.push(node.data));
  return rowData;  
}

onGridReady(params) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
}