在 Angular 2 的 ag-grid 中使用 gridOptions 中的变量

Question

我正在处理我的 Angular 2 应用程序中的一个表。我正在使用 ag-grid。这是我的 gridOptions

        this.gridOptions = <GridOptions>{

        onGridReady: (() => {
            this.gridOptions.api.sizeColumnsToFit();
            this.gridOptions.onFilterModified = function () {
                console.log("Value Changed")
            }
        })
    }

此代码运行良好。如果我更改搜索字段中的值，我将在控制台中获得文本“Value Changed”。我想在该函数之外定义的 OnFilterModified 函数中使用一个变量，但它不起作用。

console.log(this.) 在点之后我只获得 onGridReady 功能。而已。如何访问 OnFilterModified 函数中的其他函数/变量？

Answer 1

这不是真正的 ag-grid 或 angular 2 问题，而是 javascript 范围问题。

在函数中（我假设你只是在这里使用 javascript，而不是 typescript）“this”不是 out 范围，而是函数，它没有用。

对您来说最简单的解决方法是执行以下操作：

    var that = this;
    this.gridOptions = <GridOptions>{
        onGridReady: (() => {
            that.gridOptions.api.sizeColumnsToFit();
            that.gridOptions.onFilterModified = function () {
                console.log(that.gridOptions)
                console.log("Value Changed")
            }
        })
    };

我会查看这篇文章（有很多关于这个主题的文章）以获取有关 JavaScript 范围的更多信息：http://ryanmorr.com/understanding-scope-and-context-in-javascript/ 以便更好地理解这个问题。