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 is simple array。如果 ag-grid 没有刷新你的 dom 那么他们可能想要一个新的数组。你可以这样做：

this.person.cars = [this.person.cars.slice(0), yourNewCarObj];

Answer 2

要在 ag-grid 中插入新行，您不应该直接使用 rowData 它将 create\override 现有对象和所有状态都将被重置，无论如何，有一个它的方法 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});

Answer 3

确保您的 rowData 数组正在使用您添加的新对象进行更新，如果它正在更新并且只是更新网格视图的问题，您可以显式调用刷新 API网格。 https://www.ag-grid.com/javascript-grid-api/#refresh

Answer 4

对于 angular:

为 html 设置 ID - 选择器（本例中为#agGrid）：

<ag-grid-angular
  #agGrid 
  style="width: 650px; height: 500px;"
  class="ag-theme-balham"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
>
</ag-grid-angular>

然后用这个id定义viewchild，如下图导入AgGridAngular，然后就可以使用Angular

中的ag-grid api

import {Component, OnInit, ViewChild} from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';

@Component({
  selector: 'app-angular-handsometable',
  templateUrl: './angular-handsometable.component.html',
  styleUrls: ['./angular-handsometable.component.scss']
})
export class AngularHandsometableComponent implements OnInit {
  @ViewChild('agGrid') agGrid: AgGridAngular;
  columnDefs = [
    {headerName: 'Make', field: 'make', sortable: true, filter: true, editable: true },
    {headerName: 'Model', field: 'model', sortable: true, filter: true, editable: true },
    {headerName: 'Price', field: 'price', sortable: true, filter: true, editable: true }
  ];

  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];
  constructor() { }

  ngOnInit() {

  }

  save() {
    console.log( 'Save', this.rowData );
  }

  addRow() {
    this.agGrid.api.updateRowData({
      add: [{ make: '', model: '', price: 0 }]
    });
  }

}

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

Angular 6 - Add new row in AG Grid

ag-grid