绑定按钮事件在角2

Question

我想实现Jquery的数据表在我的角2应用

我可能使表在我的HTML文件，如下所示

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

在我的组件OnInit的，我正开始我的表如下，并在行动

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 
} 

增加了两个按钮，我不能够触发这两个事件custcatSelected（）和deleteCustCat（）。

我可以理解，这些事件不是按角度编译的，因为它是动态添加的。我不知道如何使这些事件工作

任何工作将是有益的谢谢。

Answer 1

我能想到的一种方式是通过jQuery监听事件并使用元素上的data属性来处理事件。我没有测试过这个代码，而且显然它不是一个干净的解决方案。只是想给你一个想法。您需要在组件顶部添加declare var $:any。因为TypeScript会对此抱怨。

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 
 
}