Probleme bei der Skalierung bei der Verwendung des Kontextmenüs

Question

Ich befolge die Dokumentation here, um ein Kontextmenüelement zu meinem Grid hinzuzufügen. Das Problem ist, dass ich aus dem Bereich von getContextMenuItems (im Beispiel) nicht auf andere Methoden oder Variablen in meiner Komponente zugreifen kann. Ist das möglich? Beispiel unten:

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; 
} 

Vielen Dank!

Answer 1

Ich gehe davon aus, dass Sie mit TypeScript von einer Angular 2 oder 4 Komponente sprechen. Wenn ja, verwenden Sie den Fettpfeil, um eine Verbindung zu Ihrer Funktion herzustellen.

Beispiel:

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

Dies sollte Sie bieten den Umfang Sie benötigen.

Answer 2

Sie den Verweis auf this Kontext in Raster hinzufügen können -

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

Und dann kann thisComponent wie unten sein, den Zugang -

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; 
} 

Gleiche kann wie cellRenderer für andere Rückrufe erfolgen .

Answer 3

Sie müssen dem Element eine übergeordnete Kontexteigenschaft zuweisen. Beispielkontextmenüpunkt:

{ Name: 'BreakoutReport', Aktion: function() { this.context.isDrillDownData = false; this.context.isBreakOutReport = Wahr; this.context.populateBreakOutGrid(); }, cssClasses: [ 'redFont', 'fett'], Behinderte: params.value.drillDownReport, Kontext: params.context }

Hier hat this.context Zugriff auf alle Funktionen übergeordneten . Beachten Sie, dass dieser Kontext zuerst in den Rasteroptionen festgelegt werden muss und dann in Kontextmenüs übertragen werden kann.

1. Schritt: Set-Kontext in gridOptions

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

2. Schritt: pass Kontext Kontextmenü Subitems

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; 
}