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

问题描述

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

I want to add a new element in AG Grid. I have a following model:

export class PersonModel {
  cars: CarModel[];
}

AG网格的行数据为 rowData 我模型的数组Cars。但是这个数组是不可观察的。现在，我想在单击按钮时添加新车：

The AG Grid has as rowData the array Cars of my model. But this array is not Observable. Now I want to add a new car when I click a button:

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

在我看来：

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

我无法在网格中看到新行，因为数组Cars不是可观察的。可以，因为模型的属性不应是可观察的。您如何解决该问题？

I can not see the new row in the grid because the array Cars is not observable. It is ok because the property of a model should not be observable. How do you fix the problem?

我的AG网格定义：

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

推荐答案

要将新行插入 ag-grid ，您不应该直接使用 rowData 来创建\覆盖现有对象，所有状态都会重置，无论如何，有一种方法

For insert a new row into ag-grid you shouldn't use the rowData directly it will create\override existing object and all states would be reset, and anyway, there is a method for it setRowData(rows)

但我建议使用 updateRowData（transaction）：

gridApi.updateRowData({add: newRows});

这篇关于Angular 6-在AG网格中添加新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！