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

Question

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

export class PersonModel {
  cars: CarModel[];
}

AG 网格为 rowData我模型的数组 Cars。但是这个数组不是 Observable 的。现在我想在单击按钮时添加一辆新车:

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

在我的 View 模型中:

  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) Update row data into the grid. Pass a transaction object with lists for add, remove and update.

As example:

gridApi.updateRowData({add: newRows});