如何使用 angular 将新行添加到 ag 网格的特定索引 7

Question

我正在尝试将新行添加到 ag-grid 的特定索引中，但我无法添加它。当我尝试添加时，它会再次在网格中添加所有内容，并与新行一起创建副本。请帮我解决这个问题。

我正在获取所选行的索引，我想在所选行的正下方添加新行。

获取选定行索引的代码。

  onRowClick(event: any): void  {
    this.index = event.rowIndex;
  }

我在 angular-ag-grid 中调用它，如下所示：

   (rowClicked)="onRowClick($event)"

我尝试在下面添加行：

 addRow(){
  this.lst.push( {"slNo": this.index,"id":3, "rank":1,
  this.gridApi.updateRowData({
  add: this.lst,
  addIndex: index
  });
}

这里 lst 是包含数组列表格式的所有行的对象模型，我正在将新行推送到该数组。以及我从 onRowClick 事件中获取的索引。

当我尝试上述方法时，它复制了数组中已经存在的值以及新行。

请帮帮我！

Answer 1

api.updateRowData(transaction) 的实际用法只需要您将要添加的特定行传递到参数中。因此，您不应传入整个 lst 对象，因为这会导致整个对象在您的 ag-grid 中重复。

这是你应该做的：

addRow(){
  // Assuming newRow is an object, such as {"slNo": this.index,"id":3, "rank":1}
  this.gridApi.updateRowData({
    add: newRow,
    addIndex: index
  });
}

官方文档有不错的选择examples供大家参考

Answer 2

另一种解决方案是将 javascript 与拼接一起使用，例如：arr.splice(targetIndex, 0, newRow).

将您的方法更改为：

addRow(){
  // Assuming newRow is an object, such as {"slNo": this.index,"id":3, "rank":1};
  rowData.splice(targetIndex, 0, newRow);
  this.gridApi.setRowData(rowData); // optional
}

Array.splice() 方法用于在数组中添加或删除项目。在上面的例子中，插入是通过将要删除的元素数设置为 0 来完成的。 "newRow" 将被插入到第一行的指定索引 (0) 处。例如，您还可以为第二行设置索引 = 1。可选择使用 API 中的“setRowData(rowData)”方法重新呈现视图。

如何使用 angular 将新行添加到 ag 网格的特定索引 7

How to add new row to a particular index of a ag grid using angular 7

indexing

ag-grid

angular