时间戳

首页 > 解决方案 > Angular 6 - 在 AG Grid 中添加新行

ag-grid - Angular 6 - 在 AG Grid 中添加新行

问题描述

我想在 AG Grid 中添加一个新元素。我有以下模型：

export class PersonModel {
  cars: CarModel[];
}

AG Grid 具有rowData我模型的数组 Cars。但是这个数组是不可观察的。现在我想在单击按钮时添加一辆新车：

<button type="button" (click)="onClickCreateCar()">

在我的视图模型中：

  onClickCreateCar() {
    var emptyCar = new CarModel();
    this.person.cars.push(emptyCar);
  }

我看不到网格中的新行，因为数组 Cars 不可观察。没关系，因为模型的属性不应该是可观察的。你如何解决这个问题？

我的 AG-Grid 定义：

<ag-grid-angular class="ag-theme-fresh" *ngIf="person" style="height: 100%; width: 100%;" [gridOptions]="gridOptions" [rowData]="person.cars" [columnDefs]="columnDefs">

标签： ag-grid

解决方案

对于插入新行，ag-grid您不应该rowData直接使用它将创建\覆盖现有对象并且所有状态都将被重置，无论如何，有一种方法setRowData(rows)

但我建议使用updateRowData(transaction)：

updateRowData(transaction)将行数据更新到网格中。传递带有添加、删除和更新列表的事务对象。

例如：

gridApi.updateRowData({add: newRows});

推荐阅读