web-dev-qa-db-fra.com

Ag-grid dans Angular ne se rafraîchit pas lorsque RowData est modifié

J'ai entièrement mis en place une ag-grid dans Angular 6 qui affiche correctement tous les rowData au démarrage de la page. Cependant, lorsque des éléments sont ajoutés aux rowData, l'affichage de l'ag- la grille ne se met pas à jour.

J'ai cette situation configurée dans le lien StackBlitz suivant:

https://stackblitz.com/edit/ag-grid-error?file=src/app/app.component.ts

J'ai configuré cela de sorte que chaque fois que vous cliquez sur le bouton en haut, un élément est ajouté à rowData et rowData est enregistré sur la console (accessible en bas à droite). Le problème que je rencontre est que lorsque je clique sur le bouton pour mettre à jour rowData, l'ag-grid n'affiche pas les nouveaux éléments.

Fait intéressant, si vous supprimez une partie du code dans l'éditeur et que vous le retapez pour mettre à jour l'affichage, les nouveaux éléments s'afficheront sur la grille ag.

Merci d'avance à toute personne qui sait résoudre ce problème.

angulartypescriptag-gridangular6stackblitz
7
Lucas LaValva

Ajoutez gridReady événement à votre grille HTML, et utilisez this.gridApi.setRowData(this.rowData) pour ré-échouer les données de la grille après l'ajout d'une nouvelle ligne.

lien vers la solution StackBlitz

<ag-grid-angular
  style="width:100%;height:90vh"
  class="ag-theme-balham"
  [gridOptions]="gridOptions"
  [columnDefs]="columnDefs"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>

Mettez à jour votre app.component.ts code comme ci-dessous

  private gridApi;
  private rowData = [];

  onGridReady(params) {
    this.gridApi = params.api; // To access the grids API
  }

  addItem() {
    this.rowData.Push({ item: "item" });   // Add new Item 
    this.gridApi.setRowData(this.rowData); // Refresh grid
    console.log(this.rowData);
  }
8
ElasticCode