克隆一行后编辑单元格似乎会更新两行的单元格，而不是更改的单元格

Question

我正在为 Angular 使用 ag-grid。我有 3 个按钮（添加、克隆和删除）。

1. 单击一次添加按钮。它增加了一行。
2. 选择第一行并单击“克隆”按钮。它会克隆该行。
3. 在新行中，双击并更改任意单元格中的值。单元格编辑完成后，它会用第二行值覆盖第一行。

如何防止这种情况发生？

StackBlitz

这是组件代码：

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  
  gridApi;
  gridColumnApi;
  rowSelection;

  
  defaultColDef = {
    flex: 1,
    minWidth: 100,
    resizable: true,
    editable: true,
    sortable: true,
    filter: false
  };

  columnDefs = [
    { headerName: 'Make', field: 'make' },
    { headerName: 'Model', field: 'model' },
    { headerName: 'Price', field: 'price'},
    { headerName: 'Miles', field: 'miles' },
    { headerName: 'Age', field: 'age'}
  ];
  
  rowData = [];

  ngOnInit() {
    this.rowSelection = 'multiple';
  }

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

  addRow() {
    this.gridApi.applyTransaction({
      add: [{ "make": 'Toyota', "model": 'Corolla', "price": '$10,000', "miles": '100', "age": '1997' }],
      addIndex:0 
    });
  }

  deleteRow() {
    var selectedData = this.gridApi.getSelectedRows();
    this.gridApi.applyTransaction({remove: selectedData});
  }

  cloneRow() {
    var selectedData = this.gridApi.getSelectedRows();
    this.gridApi.applyTransaction({add: selectedData});
  }

  onCellEditingStopped(event) {
    console.log(this.getAllRows())
  }

  getAllRows() {
    let myData = [];
    for(let i=0;i<this.gridApi.getModel().rowsToDisplay.length;i++) {
      myData.push(this.gridApi.getModel().rowsToDisplay[i].data);
    }
    return myData;
  }

}

Answer 1

您是否尝试过构建一个新实例并从所选行分配属性，而不是仅将所选行插入回添加中？即使占用了两行，它们也有可能引用相同的记录。