ag-grid 编辑数据，然后保存更新的数据并发送到数据库答案

【问题标题】：ag-grid edit data, then save updated data and send to databaseag-grid 编辑数据，然后保存更新的数据并发送到数据库
【发布时间】：2020-09-06 05:28:00
【问题描述】：

我在 Angular 上有一个空的 ag 网格表，准备好让用户输入他们的数据。我想要一个按钮，当用户单击它时，新数据将被保存然后发送到外部数据库。

我已经尝试过这个答案。 Ag-Grid edit data and sending to server

这是我的代码。

 export class MyComponent {
 gridOptions: GridOptions;
 private gridApi;
 private gridColumnApi;
   .
   . 
constructor(...) {

  this.gridOptions = {
      enableRangeSelection: true,
      columnDefs: [
        {field: 'Id', headerName: 'ID', editable: true },
        {field: 'Address', headerName: 'Address', editable: true },
      ],
      rowData: [
        {Id: '', Address: ''}, ...,{Id: '', Address: ''},
      ],


      onCellValueChanged: 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();   
       },

   }; 

}


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

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

 <ag-grid-angular 
.
.
(gridReady)="onGridReady($event)"
[gridOptions]="gridOptions"
>

<button type="button" (click)="getAllData()" class="btn btn-primary">
<span class="btn-label"><i class="fa fa-filter"></i></span> Upload To Database </button>

更改单元格值后，它抛出了这个错误：

TypeError：this.getAllData 不是 object.onCellValueChanged 处的函数。

我应该如何解决这个问题？

【问题讨论】：

如果您在 getAllData 函数中注释整个代码并记录一些消息以保证它不是别的东西会发生什么
我想我可能在这个例子上犯了一个错误。应该是onRowValueChanged(event) {...}。
你可以试试这个吗？ stackoverflow.com/a/55466306/10959940

标签： angular typescript ag-grid ag-grid-angular

【解决方案1】：

gridOptions 内部的this 上下文是网格，而不是您的组件。为了从网格中调用组件上的方法，您可以保存对组件的 this 的引用并使用该引用来调用组件上的方法：

constructor() {
  const self = this;

  this.gridOptions = {
    ...

    onCellValueChanged: function(event)  {
      const gridData = self.getAllData();
    },
  };
}

或者您可以使用箭头函数：

constructor() {  
  this.gridOptions = {
    ...

    onCellValueChanged: (event) => {
      const gridData = this.getAllData();
    },
  };
}

【讨论】：

【解决方案2】：

这看起来像是onCellValueChanged 内部的范围问题。

您可以通过取出类似于getAllData()-的函数来简化此操作-

  onCellValueChanged() {
      console.log(event); // access the entire event object
      console.log(event.data); // access and print the updated row data
      const gridData = this.getAllData();   
   },

然后在gridOptions中定义：

onCellValueChanged : this.onCellValueChanged

【讨论】：