web-dev-qa-db-ja.com

Angular 6-AGグリッドに新しい行を追加

AGグリッドに新しい要素を追加したい。私は次のモデルを持っています：

export class PersonModel {
  cars: CarModel[];
}

AGグリッドには、モデルの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">
ag-grid
7
user9923760

追加した新しいオブジェクトでrowData配列が更新されていることを確認します。その更新があり、グリッドビューを更新するだけの問題がある場合は、グリッドの更新APIを明示的に呼び出すことができます。 https://www.ag-grid.com/javascript-grid-api/#refresh

0
alokstar

角度の場合：

hTMLのIDを設定-セレクター（この例では#agGrid）：

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

次に、このIDでビューチャイルドを定義し、以下に示すように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 }]
    });
  }

}
0
Jan Clemens Stoffregen