Question

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

我已经尝试过此答案。 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的函数。

我该如何解决？

Answer 1

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

constructor() {
  const self = this;

  this.gridOptions = {
    ...

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

或者您可以改用箭头功能：

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

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

Answer 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

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

2 个答案: