javascript - 使用外部 javascript lib footable 时丢失 Angular 2 中的点击事件

Question

在使用带有 Angular 2 的外部库 footable(用于响应式表格)时，我丢失了所有事件绑定(bind)，即(单击)。 尝试过 ngZone、ChangeDetectorRef、ApplicationRef。但没有结果无法绑定(bind)回我所有丢失的 Angular 事件。

下面我写下了我的代码片段，在调用 API 后我得到一个列表并使用 *ngfor 填充我的表。

但是在 Footable.init() 之后，我失去了方法 deactivateHospital() 的绑定(bind)。当我尝试使用点击事件时， deactivateHospital() 不起作用。如果我评论 footable 那么我的代码就可以正常工作。知道如何将我的 deactivateHospital() 绑定(bind)回来吗？我知道外部 javascript 库引起了一些问题。我们有什么解决办法吗？

添加 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 代码

this.hospitalList = data["hospitals"];
        console.log(this.hospitalList);
        setTimeout(()=>{
        FooTable.init($('.table'),{},()=>{
         console.log('hi..');
        });
     },0);

    deactivateHospital(id){
    console.log('id',id);
    }

Answer 1

我在 Angular 4 和 5 中的 FooTable 中遇到了同样的问题。但是当我将 a 标签更改为按钮时，它又开始工作了。然后我将按钮设置为看起来像标签。

<ul class="dropdown-menu"><li ><button class="footablebutton" (click)="deactivateHospital(hospital.id)" ><span class="active-bubble"></span> Inactive </button></li></ul>

CSS

.footablebutton {
background:none!important;
color:#337ab7;
border:none; 
padding:0!important;
font: inherit;
cursor: pointer; }

.footablebutton :hover {
color:#23527c; }