Angular 6 - 在 AG Grid 中添加新行答案

【问题标题】：Angular 6 - Add new row in AG GridAngular 6 - 在 AG Grid 中添加新行
【发布时间】：2023-03-13 07:46:01
【问题描述】：

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

export class PersonModel {
  cars: CarModel[];
}

AG Grid 有我的模型的数组 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">

【问题讨论】：

你能把你的agGrid代码贴在这里
可能在参考更改时网格会刷新尝试使用this.person.cars = [...this.person.cars, emptyCar];

标签： ag-grid

【解决方案1】：

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

但我建议使用updateRowData(transaction)：

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

As example:

gridApi.updateRowData({add: newRows});

【讨论】：

在视图模型中使用 gridApi 是使用 ag-grid 的最佳实践/最佳方式？
使用gridApi 总是最好的——因为你不需要担心状态的流动等等。

【解决方案2】：

角度：

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

}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我访问了 ag-grid 文档并得到 rowData 是简单的数组。如果 ag-grid 没有刷新你的 dom，那么他们可能想要一个新的数组。你可以这样做：

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

【讨论】：

它有效，但[this.person.cars.slice(0), yourNewCarObj]; 无效。确实如此：var cars = this.person.cars.slice(0); cars.push(yourNewCarObj);
我只是假设。如果我要为世界创建一个组件，那么我肯定会确保我的组件渲染速度尽可能快。他们只是对changeDetection有很好的了解。这是您开发运行速度超快的项目或库的方法。