Question

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

export class PersonModel {
  cars: CarModel[];
}

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

<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，它会创建\覆盖现有对象，并且所有状态都将被重置，无论如何，有一种方法{ {3}}

但是我建议使用updateRowData(transaction)：

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

updateRowData(transaction)

gridApi.updateRowData({add: newRows});

Answer 2

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

Answer 3

对于角度：

为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 }]
    });
  }

}

Answer 4

我访问了农业网格文档，发现rowData是简单数组。如果ag-grid没有刷新您的dom，那么他们可能想要一个新的阵列。您可以这样：

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

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

4 个答案: