无法在上下文菜单中执行功能

时间:2019-07-01 15:51:43

标签: angular typescript ag-grid

我正在尝试在上下文菜单中调用一个函数。

getContextMenuItems(params) {
    console.log(params.node.data)
    var result = [

      {
        name: "Delete",
        action : function () { 
         this.deletePriceFactor(params.node.data);
        }
        ,
        cssClasses: ["redFont", "bold"]
      },
      {
        name: "Audit"
      }

    ]
      return result;
    }

 deletePriceFactor = (rowdata)  =>{
    this.priceFactorService.deleteEntry(rowdata.exchangeCode, rowdata.productCode, rowdata.secType).subscribe(pricefactors => {
    });

  }

我不断收到错误消息: 错误TypeError:this.deletePriceFactor不是函数     在Object.action(price-factor.component.ts:162)

我尝试过使用以下箭头功能:

action : () =>  { 
         this.deletePriceFactor(params.node.data);
        }

上述结果导致另一个错误:core.js:1673错误TypeError:无法读取未定义的属性'deletePriceFactor'

2 个答案:

答案 0 :(得分:1)

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

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之类的任何其他回调进行相同的操作。

参考:Scoping issues while using context menu

对我有用

答案 1 :(得分:0)

如果您的html类似于:

<ag-grid-angular
      [getContextMenuItems]="getContextMenuItems"
      .
      .
      .
    ></ag-grid-angular>

然后必须像下面这样写函数getContextMenuItems

getContextMenuItems = (params) => {
}

因此,this关键字指向您的组件。

在那之后,像这样调用您的方法

action : () => this.deletePriceFactor(params.node.data)