angular 2 ag-grid Невозможно прочитать свойство 'api' из неопределенного метода getSelectedRow ()

Question

Я работаю в проекте, который должен создать шаблон таблицы для отображения информации о сотруднике, и координатор выбрал одного из сотрудников, чтобы сделать что-то, я столкнулся с некоторыми проблемами в чем-то, называемом API, который приходит из AgGridModule, но когда я попытался выбрать строку,он может отображать его в журнале консолей.но я сталкиваюсь с проблемой:

StoreComponent.html: 2 ОШИБКА TypeError: Невозможно прочитать свойство 'api' неопределенного в StoreComponent.push ../ src / app / Component / store / store.component.ts.StoreComponent.getSelectedRows

Может кто-нибудь помочь мне решить эту проблему

вот мой код: - https://stackblitz.com/edit/angular-yfdcbn?file=src%2Fstyles.css

Answer 1

Эта проблема, потому что вы не определяете gridApi;Вы должны определить griApi в (gridReady)="onGridReady($event)" событии в вашей сетке HTML;Чем вы можете использовать onGridReady в следующих словах:

onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
}

И чем вы можете получить выбранные вами строки:

  getSelectedRows() {
    const selectedRow = this.gridApi.getSelectedRows();
    console.log(selectedRow);
  }

Если вы застряли, вы можете проверить пример ПРИМЕР

Answer 2

Вам необходимо добавить #agGrid в шаблон HTML, чтобы он выглядел следующим образом:

<ag-grid-angular  #agGrid
                  style="width: 500px; height: 500px;" 
                  class="ag-theme-balham"
                  [rowData]="rowData "
                  [columnDefs]="columnDefs"
                  rowSelection="multiple"
                  >

Причина этого в том, что переменная agGrid в вашем компоненте определяется как: @ViewChild('agGrid') agGrid: AgGridNg2;.

Итак, вам нужно определить #agGrid переменную ссылки на шаблон HTML в вашем HTML.Вы можете найти больше информации об этом в Angular doc .