Angular 6-在AG网格中添加新行

Question

我想在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">

Answer 1

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

但我建议使用updateRowData(transaction)：

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

例如：

gridApi.updateRowData({add: newRows});