Question

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

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；您必须在网格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

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;。

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

Answer 3

在带有aggrid 20的Angular 6中，当将Gridoptions与rowData＆一起使用并且通过使用setRowData（）设置rowData时，您可能会看到此问题。解决此问题的一种方法是，一旦您从API接收到数据，就不要配置它并设置Rowdata

angular 2 ag-grid无法读取getSelectedRow（）未定义的属性“ api”

3 个答案: