ag grid gridOptions.api在angular 2中未定义

我正在使用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}
    
}

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

---

这是因为组件的生命周期。在

构造函数中

尚未初始化。（我假设您已将gridOptions对象正确指定给网格。）

试着把它用在电脑上

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

从文件中

Ngonit在第一次启动后初始化指令/组件 显示数据绑定特性并设置指令/组件的 输入属性

---

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

一旦调用网格的

gridReady

事件，就会设置

gridOptions

api并准备好使用

在您要测试的行中，

gridOptions

只是一个空对象，即使在执行此操作之后：

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

this.gridOptions={
columnDefs:this.columnDefs（），
…其他线路

---

它仍然没有可用的api-挂接到

gridReady

或angular的

ngOnInit

事件中，您将能够安全地调用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}
    
}

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

它对我有用！

两个问题

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

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

其次，当ag grid调用您提供的一个处理程序（例如rowClicked）时，

此

不再是您的角度组件实例，因此在

testClick（）

方法中

this.gridOptions==未定义的

要在AgGrid事件回调中访问角度组件的属性，应通过

GridOptions传递
this
。context

如下所示：

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

注意：我不确定您如何使用

testClick（）

，但我的

rowClicked（）

可以互换，我希望

注2-

GridApi

实际上是

行ClickedEvent

的一个属性，因此，尽管通过所示的上下文对象获取它是多余的，但它说明了一点，即可以通过

AgGridEvent

的

上下文来访问ag网格事件中角度分量的属性/方法属性。
我正在使用vue.js
我也有同样的问题。
但当我包括
：gridOptions=“gridOptions”在my ag grid vue组件中
这就解决了我的问题
在使用AngularJS时，我一直在寻找关于这个问题的答案，我发现我在HTML中没有正确调用该表。由于从未调用该表，api从未设置，gridReady从未运行。我使用的语法有效：

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


谢谢你们两位的回复，.onGridReady（）{console.log（this.gridOptions.api）；//在这里它起作用了this.selectedRows=this.gridOptions.api.getSelectedRows（）；console.log（this.selectedRows）；}private testClick（事件）：void{try{console.log（this.gridOptions.api）；//此处给出错误this.selectedRows=this.gridOptions.api.getSelectedRows（）；console.log（this.selectedRows）；//获取错误时表示未定义}请帮我解决这个有趣的问题testClick什么时候被调用？它是用户驱动的吗？它对我不起作用。我可以在onGridReady甚至ngOnInit中运行它，但API仍然没有定义；cSame在AngularJs 1.x上；我将我的网格选项字段
onGridReady
定义为函数，当它被调用时，API没有定义：-（这一个是正确的，当我从onGridReady回调上的参数获取GridApi时，一切都很好