angular - 克隆一行后编辑单元格似乎会更新两行的单元格,而不是更改的单元格
问题描述
我正在使用ag-grid
Angular。我有 3 个按钮(添加、克隆和删除)。
- 单击一次添加按钮。它增加了一行。
- 选择第一行并单击“克隆”按钮。它克隆了该行。
- 在新行中,双击并更改任何单元格中的值。单元格编辑完成后,它将用第二行值覆盖第一行。
我该如何防止这种情况发生?
这是组件代码:
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;
}
}
解决方案
您是否尝试过构建一个新实例并从所选行分配属性,而不是仅将所选行插入回添加中?即使它占用两行,它们也可能引用相同的记录。
推荐阅读
- c - 文件打开命令正在杀死我的程序,为什么?
- angular - 如何在角度中使用 lodash _.debounce
- oracle - 如何使用 ords 重定向 oracle apex 应用程序
- python - 如何在 Python 中临时保存数据?
- azure - 到 Databricks 笔记本的 Azure Logic 连接器
- spring-boot - Keycloak Ouath2 集成在 spring cloud dataflow 2.3.0 中不起作用
- swift - 使用编程约束创建视图会导致内容绘制在错误的位置
- javascript - 无法在 javascript 文件 user.js(控制器)中导入我的 mongo 架构文件 order.js(模型)之一
- swift - 正则表达式在每个新行替换空格
- python-3.x - Python ROI 未从轮廓正确裁剪