角度2 ag-grid无法读取getSelectedRow（）未定义的属性'api'答案

【问题标题】：angular 2 ag-grid Cannot read property 'api' of undefined by getSelectedRow()角度2 ag-grid无法读取getSelectedRow（）未定义的属性'api'
【发布时间】：2019-07-11 16:56:28
【问题描述】：

我在需要构建一些表格模板来显示员工信息的项目中工作，并且协调员选择了其中一名员工来做某事我在来自 AgGridModule 的称为 API 的东西中遇到了一些问题，但是当我尝试选择行时它可以在控制台日志中显示。但我面临一个问题：

StoreComponent.html:2 ERROR TypeError: Cannot read property 'api' of undefined 在 StoreComponent.push../src/app/Component/store/store.component.ts.StoreComponent.getSelectedRows

谁能帮我解决一下

这是我的代码：- https://stackblitz.com/edit/angular-yfdcbn?file=src%2Fstyles.css

【问题讨论】：

你好。检查我的答案 - 它一定对你有帮助！

标签： angular6 ag-grid

【解决方案1】：

这个问题是因为你没有定义gridApi；您必须在网格 HTML 中的 (gridReady)="onGridReady($event)" 事件中定义 griApi ；比你可以像这样在 ts 中使用 onGridReady ：

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

你可以得到你选择的行：

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

如果你卡住了，你可以查看例子EXAMPLE

【讨论】：

【解决方案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;。

所以你需要在你的 HTML 中定义一个#agGrid HTML 模板引用变量。您可以找到有关该in the Angular doc 的更多信息。

【讨论】：

【解决方案3】：

在 angular 6 和 ag-grid 20 中，当您将 Gridoptions 与 rowData & 一起使用并使用 setRowData() 设置 rowData 时，您可能会看到此问题。一种解决方案是一旦您从 API 接收到数据，就不要配置它并设置 Rowdata

【讨论】：