Question

我按照文档here向我的网格添加了一个上下文菜单项。问题是，从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;
}

谢谢！

Answer 1

您可以在网格的上下文中添加对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等任何其他回调，也可以这样做。

Answer 2

我假设您使用TypeScript来谈论Angular 2或4组件。如果是，请使用胖箭头连接到您的功能。

示例：

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

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

Answer 3

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

{ 名称：'BreakoutReport'， action：function（）{ this.context.isDrillDownData = false; this.context.isBreakOutReport = true; this.context.populateBreakOutGrid（）; }， cssClasses：['redFont'，'bold']，禁用：！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;
}

Answer 4

你可以修改你的 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']
      },
}

如下所示的胖箭头方法。

使用上下文菜单时的范围问题

4 个答案: