angular - Angular 2 中未定义的 ag-grid gridOptions.api

Question

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

Answer 1

两个问题...

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

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

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

要在 AgGrid 事件回调中访问 Angular 组件的属性，您应该通过 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 的一个属性，因此虽然通过上下文对象获取它是多余的，但它说明了可以通过 AgGridEvent 的 context 属性访问 ag 网格事件中 Angular 组件的属性/方法这一点。