Проблемы с областью действия при использовании контекстного меню

Я следую здесь чтобы добавить пункт контекстного меню в мою сетку. Проблема в том, что из области действия 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;
}

Спасибо!


ag-grid ag-grid-ng2
person jwong    schedule 08.03.2017    source источник
comment
На самом деле это не связано с ag-grid. Аналогичная проблема: Метод Angular 5/4/2, переданный как ссылка, не входит в область действия   -  person Paritosh    schedule 09.03.2018
comment
Возможный дубликат Angular 5/4 / 2 метод, переданный как ссылка, не входит в область действия   -  person Paritosh    schedule 09.03.2018

Ответы (4)


arrow_upward
2
arrow_downward

Я предполагаю, что вы говорите о компоненте Angular 2 или 4, использующем TypeScript. В таком случае используйте толстую стрелку, чтобы подключиться к вашей функции.

Пример:

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

Это должно предоставить вам необходимый объем.

person Seeschorle    schedule 27.04.2017

arrow_upward
8
arrow_downward

Вы можете добавить ссылку на 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.

person Akash    schedule 28.07.2017

arrow_upward
1
arrow_downward

Вам необходимо предоставить элементу свойство родительского контекста. Пример пункта контекстного меню:

{
    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 имеет доступ ко всем родительским функциям. Помните, что этот контекст необходимо сначала установить в параметрах сетки, а затем передать его в элементы контекстного меню.

1-й шаг: установите контекст в gridOptions

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

2-й шаг: передать контекст в подпункты контекстного меню

  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;
}
person Nikheel    schedule 08.03.2018

arrow_upward
0
arrow_downward

вы можете просто изменить свой 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']
      },
}

метод жирной стрелки, как показано ниже.

person sandeep kumar    schedule 29.06.2021