Angular 2中未定义的ag-grid API [英] ag-grid API Undefined in Angular 2

问题描述

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

I am using the ag-grid API in an Angular 2 app, inside the ngOnInit method.

在onGridReady事件中就像本文中提到的一样，该API可以访问并且一切正常。

In the onGridReady event like mentioned in this post, the API is accessible and things work fine.

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

However, I need to call the API in one of the following methods as well:

• onRowDataChanged


• onNewColumnsLoaded


• onModelUpdated

此操作无效，因为未定义API。另外，由于某种原因，我也可以在onCellDoubleClicked和onCellClicked事件中调用该API。

This is not working because the API is undefined. In addition, for some reason I can also call the API in the onCellDoubleClicked and onCellClicked events.

这似乎是一个错误。有人知道发生了什么吗？

This seem to be a bug. Does anyone know what is going on?

请参见下面的代码：

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

推荐答案

好的，这是我的方法

• 首先，为角度组件捕获此引用，以确保您没有JavaScript作用域问题。

• First, capture the this reference for your angular component just to make sure that you will not have JavaScript scoping issues.

然后，在onGridReady事件中可用时捕获API参考

Then, capture the API reference when it is available inside the onGridReady event

最后，只有在堆栈为空后才调用API，使用setTimeout函数延迟所有API调用

Lastly, only call the API after the stack is empty, deferring all the API calls with the setTimeout function

所以现在代码看起来或多或少是这样的：

So now the code looks more or less like this:

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

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

这篇关于Angular 2中未定义的ag-grid API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！