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

Question

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

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

如何防止这种情况发生？

组件代码如下：

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": ',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

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

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

Editing a cell after cloning a row seems to update cells for both rows instead of the one that's changed

ag-grid

angular

ag-grid-angular