Ag-grid в Angular не обновляется при изменении RowData

Question

Я полностью настроил ag-сетку в Angular 6, которая правильно показывает все rowData при запуске страницы.Однако когда элементы добавляются в rowData, отображение ag-сетки не обновляется.

У меня есть эта ситуация, настроенная в следующей ссылке StackBlitz:

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

Я настроил это так, чтобы каждый раз, когда нажималась кнопка вверху, элемент добавлялся в rowData, а rowData регистрировался в консоли (доступ к нему в правом нижнем углу).Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю кнопку для обновления rowData, ag-grid не отображает новые элементы.

Интересно, что если вы удалите какую-либо часть кода в редактореи перепечатайте его, чтобы обновить отображение, новые элементы будут показываться в ag-grid.

Заранее спасибо всем, кто знает, как решить эту проблему.

Answer 1

Добавьте gridReady событие в вашу таблицу HTML, и используйте 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);
  }