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

Question

Я полностью настроил ag-grid в 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);
  }