ag-grid API 未定义 Angular 2

Question

我在 Angular 2 应用程序中使用 ag-grid API，在 ngOnInit 方法中。

在 onGridReady 事件 like mentioned in this post 中，API 可以访问并且一切正常。

但是，我还需要使用以下方法之一调用 API：

onRowDataChanged
onNewColumnsLoaded
onModelUpdated

这不起作用，因为 API 未定义。此外，出于某种原因，我还可以在 onCellDoubleClicked 和 onCellClicked 事件中调用 API。

这似乎是一个错误。有谁知道是怎么回事吗？

请看下面的代码：

ngOnInit() {

    this.gridOptions = <GridOptions>{

        onGridReady: function (param) {
            param.api.sizeColumnsToFit(); // works fine
        },

        onCellDoubleClicked: function (param) {
            param.api.sizeColumnsToFit(); // works fine
        },

        onRowDataChanged: function (param) {
            param.api.sizeColumnsToFit(); // API is undefined
        },
    };
}

Answer 1

好的，这就是我的工作方式。

首先，为您的 angular 组件捕获 this 引用，以确保您不会遇到 JavaScript 范围问题。
然后，当 API 引用在 onGridReady 事件中可用时捕获它
最后，只在栈为空后调用API，延迟所有API调用setTimeout函数

所以现在代码看起来大致像这样：

...
let self = this;
...
onGridReady: function (param) {
    self.api = param.api;
},

onRowDataChanged: function (param) {
    setTimeout(() => {
        self.api.sizeColumnsToFit()
        ...more API calls...
    }, 0);
},
...

Answer 2

当出现问题时，ag grid 将无法正确创建 api，因此 api 将是 undefined。

在我的例子中，控制台出现了一个关于我忘记导入 'ag-grid-enterprise' 的错误（我使用的是 rowModelType: 'serverSide'），所以它无法初始化。

因此请检查选项是否有效以及它是否在控制台上给您任何错误。

ag-grid API 未定义 Angular 2

ag-grid API Undefined in Angular 2

ag-grid

angular