更新行后保留数据

Question

在ag-grid中更新行之后，检索更新后的行以便将其传递到服务的最佳方法是什么？

我正在尝试使用api.forEachNode检索更新的行。但是当我在调试器工具中查看节点时，它是未定义的。

代码如下：

names.component.html：

<ag-grid-angular style="width: 100%; height: 800px"
  class="ag-theme-balham"
  (gridReady)="onGridReady($event)"
  [columnDefs]="columnDefs"
  [rowData]="customerNames"
  [pagination]="true"
  [paginationPageSize]="50"
>
</ag-grid-angular>
<button (click)="onCustomerSaved($event)">Save</button>

names.component.ts：

import { Component, AfterViewInit } from '@angular/core';
import { CustomerNameService } from '../customer-name.service';
import { CustomerName } from '../customer-name';
import { ColDef, GridApi, ColumnApi } from 'ag-grid-community';

@Component({
  selector: 'app-names',
  templateUrl: './names.component.html',
  styleUrls: ['./names.component.css']
})
export class NamesComponent implements AfterViewInit {
  customerNames: Array<CustomerName>
  private columnDefs: ColDef[];

  private api: GridApi;
  private columnApi: ColumnApi;

  constructor(private customerNameService: CustomerNameService) { 
    this.columnDefs= this.createColumnDefs();
  }

  ngAfterViewInit() {
    this.customerNameService
        .getCustomerNames()
        .subscribe(data => {this.customerNames = data;});
  }

  onGridReady(params): void {
    this.api = params.api;
    this.columnApi = params.columnApi;
    this.api.sizeColumnsToFit();
  }

  onCustomerSaved() {
    this.api.forEachNode((node) => {
        console.log(node.key);
    });
  }

  private createColumnDefs() {
    return [
      {field: 'Id', sortable: true},
      {header: 'Customer Number', field: 'CustomerNumber', sortable: true, filter: true, 
                editable: true},
      {header: 'First Name', field: 'FirstName', sortable: true, filter: true},
      {header: 'Middle Name', field: 'MiddleName', sortable: true, filter: true},
      {header: 'Last Name', field: 'LastName', sortable: true, filter: true},
      {header: 'DNP', 
        field: 'IsDNP', 
        cellRenderer: params => {
          return `<input type='checkbox' ${params.value ? 'checked': ''}/>`
        }  
      },
      {header: 'Active', 
        field: 'IsActive', 
        cellRenderer: params => {
          return `<input type='checkbox' ${params.value ? 'checked': ''}/>`
        }  
      }
    ]
  }

}