Angular 6 - Добавить новую строку в AG Grid

Question

Я хочу добавить новый элемент в AG Grid.У меня есть следующая модель:

export class PersonModel {
  cars: CarModel[];
}

Сетка AG имеет как rowData массив автомобилей моей модели.Но этот массив не наблюдается.Теперь я хочу добавить новую машину, когда я нажимаю кнопку:

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

И в моей viewmodel:

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

Я не вижу новую строку в сетке, потому что массивАвто не наблюдается.Это нормально, потому что свойство модели не должно быть наблюдаемым.Как решить проблему?

Мое определение 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

для угловых:

установить идентификатор для html-селектора (в этом примере #agGrid):

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

и затем определить viewchild с этим идентификатором, импортировать AgGridAngular, как показано ниже,тогда вы можете использовать ag-grid API в Angular

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 2

Для вставки новой строки в ag-grid не следует использовать rowData напрямую, она создаст \ переопределит существующий объект, и все состояния будут сброшены, и в любом случае, для этого есть метод setRowData(rows)

Но я бы рекомендовал использовать updateRowData(transaction):

updateRowData(transaction) Обновить данные строки всетка.Передайте объект транзакции со списками для добавления, удаления и обновления.

Как пример:

gridApi.updateRowData({add: newRows});

Answer 3

Убедитесь, что ваш массив rowData обновляется с добавлением нового объекта, и если он обновляется, и это просто вопрос обновления вида сетки, вы можете явно вызывать API обновления сетки.https://www.ag -grid.com / JavaScript-сетка-апи / # обновление

Answer 4

Я посетил документацию ag-grid и получил rowData - простой массив.Если ag-grid не обновляет ваш дом, то, возможно, им нужен новый массив.Вы можете сделать так:

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