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()
 {
    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}

}//constructor

请指教，谢谢

更新了以下评论中的代码

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

gridOptions api将在设置网格的gridReady事件后设置并准备就绪。

在您正在测试它的行上，gridOptions只是一个空对象，甚至在您执行此操作之后：

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

它仍然没有api可用 - 挂钩gridReady或角度ngOnInit事件，你将能够安全地调用api。

Answer 2

两个问题......

首先，正如其他人所提到的那样，在onGridReady中初始化对grid api的引用，如此

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

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

要在AgGrid事件回调中访问角度组件的属性，您应该通过this通过GridOptions.context，如下所示：

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的{{1}}属性完成。

Answer 3

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

尝试在

中使用它

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

来自文档

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

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

Answer 4

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

Answer 5

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

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

Answer 6

试试这个：

import networkx as nx
from networkx import bipartite    

def plotGraph(graph,ax,title):    
    pos=[(ii[1],ii[0]) for ii in graph.nodes()]
    pos_dict=dict(zip(graph.nodes(),pos))
    nx.draw(graph,pos=pos_dict,ax=ax,with_labels=True)
    ax.set_title(title)
    return   

if __name__=='__main__':    
    #---------------Construct the graph---------------
    g=nx.Graph()
    edges=[
            [(1,0), (0,0)],
            [(1,0), (0,1)],
            [(1,0), (0,2)],
            [(1,1), (0,0)],
            [(1,2), (0,2)],
            [(1,2), (0,5)],
            [(1,3), (0,2)],
            [(1,3), (0,3)],
            [(1,4), (0,3)],
            [(1,5), (0,2)],
            [(1,5), (0,4)],
            [(1,5), (0,6)],
            [(1,6), (0,1)],
            [(1,6), (0,4)],
            [(1,6), (0,6)]
            ]

    for ii in edges:
        g.add_node(ii[0],bipartite=0)
        g.add_node(ii[1],bipartite=1)

    g.add_edges_from(edges)

    #---------------Use maximal_matching---------------
    match=nx.maximal_matching(g)    
    g_match=nx.Graph()
    for ii in match:
        g_match.add_edge(ii[0],ii[1])

    #----------Use bipartite.maximum_matching----------
    match2=bipartite.maximum_matching(g)    
    g_match2=nx.Graph()
    for kk,vv in match2.items():
        g_match2.add_edge(kk,vv)

    #-----------------------Plot-----------------------
    import matplotlib.pyplot as plt
    fig=plt.figure(figsize=(10,8))

    ax1=fig.add_subplot(2,2,1)
    plotGraph(g,ax1,'Graph')

    ax2=fig.add_subplot(2,2,2)
    plotGraph(g_match,ax2,'nx.maximal_matching()')

    ax3=fig.add_subplot(2,2,3)
    plotGraph(g_match2,ax3,'bipartite.maximum_matching()')

    plt.show()

它对我有用！

ag-grid gridOptions.api在角度2中未定义

6 个答案: