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

Question

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

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

请告诉我除了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;
}