Binding Knopf Event in JQuery Datentabelle in Angular 2

Question

Ich versuche, die JQuery Datentabelle in meiner Angular 2 Anwendung zu implementieren

ich die Tabelle in meiner HTML-Datei übertragen könnte als

<sa-datatable [options]="options" tableClass="table table-striped table-bordered table-hover"> 
          <thead> 
           <tr> 
            <th>ID</th> 
            <th>Name</th> 
            <th>Action</th> 
           </tr> 
          </thead> 
         </sa-datatable> 

In meiner Komponente folge Oninit, ich meine Initialisierung Tabelle wie folgt und das Hinzufügen von zwei Schaltflächen in der Aktions

ngOnInit() { 
    this.options = { 
     dom: "Bfrtip", 
     ajax: (data, callback, settings) => { 
      //My Service Call 
     }, 
     columns: [ 
      { data: "result.id" }, 
      { data: "result.name" }, 
      { 
       data: null, render: function (data, type, row) { 
       return '<button id="myButton" class="btn btn-primary editbutton" data-toggle="modal" title="1" data-target="#mymodal" (click)="custcatSelected(' + data.result + ')">Edit</button>/<button #myButton1 class="btn btn-danger deletebutton" (click)=deleteCustCat(' + data.result.id + ')>Delete</button>'; 
       } 
      } 
     ], 
     buttons: [ 
      'copy', 'excel', 'pdf', 'print', 'colvis' 
     ] 
    }; 
} 

public custcatSelected(customercat) { 
    //Implemetation for Edit , where customercat is an object 
} 

public deleteCustCat(custcatId: string) { 
    //Implementation for Deleting 
} 

ich bin nicht in der Lage, diese beiden Ereignisse custcatSelected() und deleteCustCat() auslösen.

Ich könnte verstehen, dass diese Ereignisse nicht von eckig kompiliert werden, da es dynamisch hinzugefügt wird. Und ich weiß nicht, wie man diese Ereignisse funktioniert

Jede Arbeit umher wäre hilfreich Danke.

Answer 1

Eine Möglichkeit, die ich mir vorstellen kann, ist das Abhören des Ereignisses durch jQuery und die Verwendung des Datenattributs des Elements, um das Ereignis zu behandeln. Ich habe diesen Code nicht getestet, und anscheinend ist es keine saubere Lösung. Nur um dir eine Idee zu geben.

Sie müssen auch declare var $:any am oberen Rand Ihrer Komponente hinzufügen. Weil TypeScript sich darüber beschweren wird.

ngOnInit() { 
 
    this.options = { 
 
     dom: "Bfrtip", 
 
     ajax: (data, callback, settings) => { 
 
      //My Service Call 
 
     }, 
 
     columns: [ 
 
      { data: "result.id" }, 
 
      { data: "result.name" }, 
 
      { 
 
       data: null, render: function (data, type, row) { 
 
        return ` 
 
         <button id="selectedBtn" class="btn btn-primary editbutton" data-toggle="modal" title="1" 
 
           data-target="#mymodal" 
 
           data-elemnt-obj="${data.result}">Edit</button> 
 

 
         <button class="btn btn-danger deletebutton" 
 
           data-element-id="${data.result.id}">Delete</button> 
 
        `; 
 
       } 
 
      } 
 
     ], 
 
     buttons: [ 
 
      'copy', 'excel', 'pdf', 'print', 'colvis' 
 
     ] 
 
    }; 
 

 
    $(document).on('click', '#selectedBtn', ($event) => { 
 
     let customerCat = JSON.parse($($event).data('elemnt-obj')); 
 
     this.custcatSelected(customerCat); 
 
    }); 
 

 
    $(document).on('click', '.deletebutton', ($event) => { 
 
     let customerId = $($event).data('element-id'); 
 
     this.deleteCustCat(customerId); 
 
    }); 
 
} 
 

 
public custcatSelected(customercat) { 
 
    //Implemetation for Edit , where customercat is an object 
 
} 
 

 
public deleteCustCat(custcatId: string) { 
 
    //Implementation for Deleting 
 
}