외부 javascript lib foot footble을 사용하는 중에 각도 2에서 click 이벤트가 끊어짐

Question

각도 2 인 외부 라이브러리 footable (응답 테이블 용)을 사용하는 동안 모든 이벤트 바인딩 즉 (클릭)이 손실됩니다. 시도한 ngZone, ChangeDetectorRef, ApplicationRef. 하지만 내 모든 잃어버린 각도 사건을 구속 할 수없는 결과는 없습니다.

아래 코드를 작성한 후 API를 호출 한 후 목록을 가져 와서 * ngfor를 사용하여 테이블을 채 웁니다.

그러나 Footable.init()가 deactivateHospital() 메소드의 바인딩을 잃는 중입니다. 그리고 click 이벤트를 사용하려고하면 deactivateHospital()가 작동하지 않습니다. 만약 내가 footable 의견을 내 코드가 잘 작동합니다. 어떤 방법으로 내 deactivateHospital()를 다시 바인딩 할 수 있습니까? 외부 자바 스크립트 라이브러리가 일부 문제를 일으키는 것을 알고 있습니다. 이 문제에 대한 해결책이 있습니까?

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

// 각 코드 나는 FooTable와 각도 4와 5에서 동일한 문제가 있었다

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

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

Answer 1

. 그러나 태그를 단추로 변경하면 다시 작동하기 시작합니다. 그런 다음 단추 모양을 태그 모양으로 지정했습니다. 이런 종류의 문제로

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

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