Je veux ajouter un nouvel élément dans AG Grid. J'ai un modèle suivant:
export class PersonModel {
cars: CarModel[];
}
La grille AG a comme rowData
le tableau Cars de mon modèle. Mais ce tableau n'est pas observable. Maintenant, je veux ajouter une nouvelle voiture lorsque je clique sur un bouton:
<button type="button" (click)="onClickCreateCar()">
Et à mon avis:
onClickCreateCar() {
var emptyCar = new CarModel();
this.person.cars.Push(emptyCar);
}
Je ne vois pas la nouvelle ligne dans la grille car le tableau Cars n'est pas observable. C'est correct car la propriété d'un modèle ne doit pas être observable. Comment résolvez-vous le problème?
Ma définition AG-Grid:
<ag-grid-angular class="ag-theme-fresh" *ngIf="person" style="height: 100%; width: 100%;" [gridOptions]="gridOptions" [rowData]="person.cars" [columnDefs]="columnDefs">
Assurez-vous que votre tableau rowData est mis à jour avec le nouvel objet que vous avez ajouté et s'il est mis à jour et qu'il s'agit simplement de mettre à jour la vue de la grille, vous pouvez appeler explicitement les API d'actualisation de la grille. https://www.ag-grid.com/javascript-grid-api/#refresh
pour angulaire:
set id for html - selector (#agGrid dans cet exemple):
<ag-grid-angular
#agGrid
style="width: 650px; height: 500px;"
class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
puis définissez le viewchild avec cet id, importez AgGridAngular comme indiqué ci-dessous, alors vous pouvez utiliser l'api ag-grid dans 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 }]
});
}
}