web-dev-qa-db-ja.com

AngularのAg-gridは、RowDataが変更されたときに更新されません。

Angular 6でag-gridを完全に設定しました。これにより、ページが開始されたときにすべてのrowDataが正しく表示されます。ただし、rowDataにアイテムが追加されると、ag-グリッドは更新されません。

この状況は、次のStackBlitzリンクで設定しています。

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

これを設定して、上部のボタンがクリックされるたびに項目がrowDataに追加され、rowDataがコンソールに記録されるようにします（右下にアクセスします）。私が実行している問題は、rowDataを更新するためにボタンをクリックすると、ag-gridが新しいアイテムを表示しないことです。

興味深いことに、エディターでコードの一部を削除し、それを再入力して表示を更新すると、新しい項目willがag-gridに表示されます。

この問題を解決する方法を知っている人に事前に感謝します。

angulartypescriptag-gridangular6stackblitz
9
Lucas LaValva

グリッドHTMLにgridReadyイベントを追加し、this.gridApi.setRowData(this.rowData)を使用して、新しい行の追加後にグリッドデータを更新します。

StackBlitzソリューションリンク

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

app.component.tsコードを以下のように更新します

  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);
  }
10
ElasticCode