Wie können Ereignisse für die dynamisch erzeugten Schaltflächen in ag-grid-Zellen gerendert werden?

Question

Hie Ich benutze ag-grid angular2, wo ich versuche, eine Schaltfläche in jeder Zeile zu platzieren, die ich erfolgreich bin. Wenn ich auf diese Schaltfläche klicke ich einen Ereignis-Listener der Schaltfläche hinzufügen, so dass wenn diese Schaltfläche geklickt wird ich möchte ein Ereignis auslösen. Dies ist, wie ich Tasten auf jeder Zeile bin Hinzufügen

{headerName: "Gold", field: "gold", width: 100, cellRenderer: this.ageCellRendererFunc }, 

Hier schreibe ich die addEventListener Logik für die Schaltfläche

ageCellRendererFunc(params) { 
    var eSpan = document.createElement('button'); 
    console.log(params); 
    eSpan.innerHTML = 'Del'; 
    eSpan.addEventListener('click', function() { 
     this.raiseevent(); 
    }); 
    return eSpan; 
} 

Dies ist das Ereignis, das ich ansprechen möchte, wenn die Schaltfläche

geklickt wird

Aber es zeigt einen Fehler an, dass raiseevent nicht definiert ist ... Wie kann ich diesen Fehler korrigieren ... Wie kann ich die Referenz eines Ereignisses in addeven angeben tListener ... Jemand bitte helfen Sie mir

Answer 1

Verwenden => statt function

eSpan.addEventListener('click',() => { 

sonst this nicht zu Ihrer Klasse zeigen, wenn der Rückruf aufgerufen wird.

Siehe https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

auch diese Website: http://www.flyingtophat.co.uk/blog/2016/02/19/workaround-for-angular2-event-binding-in-ag-grid-cell-templates.html hat eine Antwort, die ich denke, wird für Sie arbeiten. Es ist hässlich, weil Sie das generische onRowClicked-Ereignis anhören müssen und dann das Ereignis untersuchen müssen, um festzustellen, welche Schaltfläche gedrückt wurde, aber es sollte funktionieren.

Beispiel:

<ag-grid-ng2 #agGrid class="ag-fresh" 
    rowHeight="10" 

    [columnDefs]="columnsDefs" 
    [rowData]="rowData" 

    (rowClicked)="onRowClicked($event)"> 
</ag-grid-ng2> 

@Component({ 
    directives: [AgGridNg2], 
    selector: "user-table", 
    templateUrl: "../user-table.subhtml" 
}) 
export class TableComponent { 
    public columnDefs = [ 
     { headerName: "Username", field: "username" }, 
     { headerName: "Actions", 
      suppressMenu: true, 
      suppressSorting: true, 
      template: 
      `<button type="button" data-action-type="view" class="btn btn-default"> 
       View 
      </button> 

      <button type="button" data-action-type="remove" class="btn btn-default"> 
       Remove 
      </button>` 
     } 
    ]; 

    public onRowClicked(e) { 
     if (e.event.target !== undefined) { 
      let data = e.data; 
      let actionType = e.event.target.getAttribute("data-action-type"); 

      switch(actionType) { 
       case "view": 
        return this.onActionViewClick(data); 
       case "remove": 
        return this.onActionRemoveClick(data); 
      } 
     } 
    } 

    public onActionViewClick(data: any){ 
     console.log("View action clicked", data); 
    } 

    public onActionRemoveClick(data: any){ 
     console.log("Remove action clicked", data); 
    } 
}