[英]Losing click event in angular 2 while using external javascript lib footable
While using external library footable(for a responsive table) with angular 2, I am losing all event bindings ie (click). 在将外部库footable(用于响应表)与Angular 2一起使用时,我丢失了所有事件绑定,即(单击)。 Tried ngZone, ChangeDetectorRef,ApplicationRef. 尝试过ngZone,ChangeDetectorRef,ApplicationRef。 but no result not able to bind back my all lost angular events. 但没有结果无法约束我所有丢失的角度事件。
Below I have written down my code snippet where after calling an API I get a list and using *ngfor i populate my table. 在下面,我写下了代码段,在调用API之后,我会得到一个列表并使用* ngfor填充表。
But after Footable.init() am losing binding of method deactivateHospital(). 但是在Footable.init()失去方法deactivateHospital()的绑定之后。 And when I try using click event, deactivateHospital() doesn't work. 当我尝试使用click事件时,deactivateHospital()无法正常工作。 If I comment footable then my code works fine. 如果我发表评论,那么我的代码就可以正常工作。 Any idea how to bind back my deactivateHospital() back? 知道如何将我的deactivateHospital()绑定回去吗? I know the external javascript library is causing some issue. 我知道外部javascript库引起了一些问题。 Do we have any solution for this? 我们对此有什么解决方案吗?
Adding plnkr: http://plnkr.co/edit/Np2ooN2M07pyVrQiM0Tv?p=preview 添加plnkr: http ://plnkr.co/edit/Np2ooN2M07pyVrQiM0Tv?p=preview
<tr data-expanded="true" *ngFor="let hospital of hospitalList">
<td class="hospital-name">{{hospital.name}}</td>
<td ><span class="ha-name">{{hospital.admin}}</span><br><span class="ha-id">{{hospital.emailId}}</span>
</td>
<td>{{hospital.hsa_count}}</td>
<td>{{hospital.pcm_count}}</td>
<td>{{hospital.pcv_count}}</td>
<td>{{hospital.surgeons_count}}</td>
<td>{{hospital.prefcards_count}}</td>
<td class="active-status"><span class="active-bubble" ></span>
Active
<span class="dropdown">
<span class="dropdown-toggle mr-l-10" type="button" data-
toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span></span>
<ul class="dropdown-menu">
<li ><a (click)="deactivateHospital(hospital.id)" ><span
class="active-bubble"></span> Inactive </a></li>
</ul>
</span>
</td>
</tr>
//angular code //角度代码
this.hospitalList = data["hospitals"];
console.log(this.hospitalList);
setTimeout(()=>{
FooTable.init($('.table'),{},()=>{
console.log('hi..');
});
},0);
deactivateHospital(id){
console.log('id',id);
}
I have had the same problem in Angular 4 and 5 with the FooTable. 我在FooTable的Angular 4和Angular 5中遇到了同样的问题。 But when I changed the a tag to a button it started working again. 但是,当我将标签更改为按钮时,它又开始工作了。 I then styled the button to look like aa tag. 然后,我将按钮样式设置为看起来像标签。
<ul class="dropdown-menu"><li ><button class="footablebutton" (click)="deactivateHospital(hospital.id)" ><span class="active-bubble"></span> Inactive </button></li></ul>
CSS 的CSS
.footablebutton {
background:none!important;
color:#337ab7;
border:none;
padding:0!important;
font: inherit;
cursor: pointer; }
.footablebutton :hover {
color:#23527c; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.