6

我正在按照此处的文档向我的网格添加上下文菜单项。问题是从 getContextMenuItems 的范围（在示例中），我无法访问组件中的任何其他方法或变量。这可能吗？下面的例子：

private varIWantToAccess: boolean = false;

function getContextMenuItems(params) {
    var result = [
    { // custom item
        name: 'Alert ' + params.value,
        action: function () 
    {
        window.alert('Alerting about ' + params.value);
        this.varIWantToAccess = true; // Builds fine, but throws a run time exception, since this "this" context is different than the one that has "varIWantToAccess"
    }
    },
        ....
        return result;
}

谢谢！

4

4 回答 4

8

您可以this在网格的上下文中添加对的引用 -

this.gridOptions.context = {
                    thisComponent : this
                };

然后，thisComponent可以访问如下 -

private getContextMenuItems(params) { 
    console.log(params);
    var result = [
        { // custom item
            name: 'Sample',
            action: function () {params.context.thisComponent.callMe();  },
            icon: '<i class="fa fa-pencil" />'
        }];
    return result;
}

对于任何其他回调，例如cellRenderer.

于 2017-07-28T13:13:25.393 回答
4

我假设您说的是使用 TypeScript 的 Angular 2 或 4 组件。如果是这样，那么使用胖箭头连接到您的功能。

例子：

gridOptions.getContextMenuItems = () => this.getContextMenuItems();

这应该为您提供所需的范围。

于 2017-04-27T12:59:41.190 回答
1

你可以修改你的 getContextMenuItems

getContextMenuItems = (params) => {
    var result = [
      {
        name: 'Activate ' + params.value,
        action: function () {
          window.alert('Activated Successfully ');
        },
        cssClasses: ['redFont', 'bold'],
      },
      {
        name: 'Details',
        action: () => {
          this.router.navigate(['container-authorization/listing/distributor-container-store/details']);
        },
        cssClasses: ['redFont', 'bold']
      },
}

方法到胖箭头方法，如下所示。

于 2021-06-29T08:36:45.077 回答
1

您需要为项目提供父上下文属性。示例上下文菜单项：

{
    name: 'BreakoutReport',
    action: function () {
        this.context.isDrillDownData = false;
        this.context.isBreakOutReport = true;
        this.context.populateBreakOutGrid();
    },
    cssClasses: ['redFont', 'bold'],
    disabled: !params.value.drillDownReport,
    context: params.context
}

在这里，this.context可以访问所有父函数。请记住，此上下文需要先在网格选项中设置，然后才能转移到上下文菜单项。

第一步：在 gridOptions 中设置上下文

 getGridOption() {
     return {
         getContextMenuItems: this.getContextMenu,
         context: this//pass parent context
     };
 }

第二步：将上下文传递给上下文菜单子项

  getContextMenu(params) {
    const result = [
         {
            name: 'Drilldown Report',
            action: function () {
                this.context.populateDrillDownReport();//access parent context using this.context inside the function.
            },
            cssClasses: ['redFont', 'bold'],
            disabled: !params.value.drillDownReport,
            context: params.context//pass parent context
        },
        'separator',
        'copy',
        'copyWithHeaders'];
    return result;
}
于 2018-03-08T11:02:18.277 回答