角度 2 中未定义的 ag-grid gridOptions.api答案

【问题标题】：ag-grid gridOptions.api undefined in angular 2角度 2 中未定义的 ag-grid gridOptions.api
【发布时间】：2017-03-16 16:21:24
【问题描述】：

我正在使用 typescript 在 angular2 中尝试 ag-grid，由于某些原因，我无法使用 ag-grid API，出现未定义的错误。

代码如下：

import { AgRendererComponent } from 'ag-grid-ng2/main';
import { GridOptions, RowNode } from 'ag-grid/main';
import { GridOptionsWrapper } from 'ag-grid/main';
import { GridApi } from 'ag-grid/main';

public gridOptions: GridOptions;

/**
 * Constructor
 */
constructor()
{
    this.gridOptions = <GridOptions>{};

    alert(this.gridOptions);
    alert(this.gridOptions.api); // *** getting undefined  ***
    
    
    this.gridOptions = <GridOptions>{
        columnDefs: this.columnDefs(),
        rowData: this.rowData,
        onSelectionChanged: this.onSelectionChanged,
        groupSelectsChildren: true,
        suppressRowClickSelection: true,

        rowSelection: 'multiple',
        enableColResize: true,
        enableSorting: true,
        rowHeight: 45}
    
}

请指教，谢谢

更新了下面评论中的代码

onGridReady() {
    console.log(this.gridOptions.api); // here it work
    this.selectedRows = this.gridOptions.api.getSelectedRows();
    console.log(this.selectedRows);
}

private testClick(event): void {
    try {
        console.log(this.gridOptions.api); // here gives error
        this.selectedRows = this.gridOptions.api.getSelectedRows();
        console.log(this.selectedRows); //getting error saying undefined
    }
}

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

两个问题...

首先，正如其他人所提到的，像这样在 onGridReady 中初始化对网格 api 的引用

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

其次，当 ag-grid 调用您提供的处理程序之一（例如 rowClicked）时，this 不再是您的角度组件实例，因此在您的 testClick() 方法中 this.gridOptions === undefined。

要在 AgGrid 事件回调中访问角度组件的属性，您应该像这样通过 GridOptions.context 传递 this：

this.gridOptions = <GridOptions>{
     context: {parentComponent: this},
     ...other lines

AgGrid 的事件（通常）在事件参数中返回对此上下文对象的引用..

rowClicked(rowClicked: RowClickedEvent) {
    const localGridApiRef = rowClicked.context.parentComponent.gridApi;

    // do stuff with the grid api...
    const selectedRows = localGridApiRef.getSelectedRows();
};

注意：我不确定您如何使用 testClick()，但我希望我的 rowClicked() 可以互换...

注意 2 - GridApi 实际上是 RowClickedEvent 的一个属性，因此虽然通过上下文对象获取它是多余的，但它说明了访问您的属性/方法的要点ag 网格事件中的角度组件可以通过AgGridEvent 的context 属性完成。

【讨论】：

这个是正确的，当我从 onGridReady 回调的参数中获取 GridApi 时就可以了

【解决方案2】：

一旦调用了网格的gridReady 事件，gridOptions api 将被设置并准备好使用。

在你测试它的那一行，gridOptions 只是一个空对象，即使你这样做了：

this.gridOptions = <GridOptions>{
     columnDefs: this.columnDefs(),
     ...other lines

它仍然没有可用的 api - 挂钩到 gridReady 或 angular 的 ngOnInit 事件，您将能够安全地调用 api。

【讨论】：

谢谢两位的回复。, onGridReady() { console.log(this.gridOptions.api); // 这里可以使用 this.selectedRows = this.gridOptions.api.getSelectedRows(); console.log(this.selectedRows); } private testClick(event): void { try { console.log(this.gridOptions.api); // 这里给出错误 this.selectedRows = this.gridOptions.api.getSelectedRows(); console.log(this.selectedRows); //得到错误说未定义}请帮助我解决这个有趣的问题
testClick 什么时候被调用？是用户驱动的吗？
它对我不起作用。我可以在 onGridReady 甚至 ngOnInit 中运行它，但 API 仍然未定义；c
这里相同，在 AngularJs 1.x 上；我将提交onGridReady 的网格选项定义为一个函数，并且在调用它时，API 未定义:-(

【解决方案3】：

这是因为组件生命周期。在constructor 中它还没有被初始化。（我假设您将 gridOptions 对象正确分配给您的网格。）

尝试在中使用它

ngOnInit() { 
    console.log(this.gridOptions.api)
}

来自文档

ngOnInit 先在 Angular 之后初始化指令/组件显示数据绑定属性并设置指令/组件的输入属性。

获取有关生命周期的更多信息here。

【讨论】：

【解决方案4】：

我在使用 AngularJS 时一直在寻找答案。对于与我遇到相同问题的其他人（尽管这不是 AngularJS 特定问题），我发现我没有在 HTML 中正确调用该表。由于从未调用过该表，因此从未设置过 API，并且从未运行过 gridReady。我使用的有效语法：

<div class="table-body">
  <div ag-grid="$ctrl.gridOptions" class="ag-theme-fresh ag-grid-container"></div>
</div>

【讨论】：

【解决方案5】：

试试这个：

export class MyComponent implements OnInit {
  selected = () => console.log('ID: ', this.gridOptions.api.getSelectedRows()[0].id);

  gridOptions: GridOptions = {
    columnDefs: [
        {headerName: 'ID', field: 'id', width: 80},
        { ... }
    ],
    rowSelection: 'single'
  }

  ngOnInit() {
    this.gridOptions.rowData = this.gridData;
    this.gridOptions.onSelectionChanged - this.selected;
  }

它对我有用！

【讨论】：

【解决方案6】：

我使用的是 vue.js 有同样的问题。但是当我包括 :gridOptions="gridOptions" 在我的 ag-grid-vue 组件中解决了我的问题

【讨论】：