Perdre un événement de clic dans l'angle 2 tout en utilisant javascript lib footable

Question

Lors de l'utilisation d'un pied de bibliothèque externe (pour une table responsive) avec l'angle 2, toutes les liaisons d'événements sont perdues (clic). Essayé ngZone, ChangeDetectorRef, ApplicationRef. mais aucun résultat n'est pas capable de lier mes événements angulaires tous perdus. Ci-dessous j'ai écrit mon extrait de code où après avoir appelé une API, j'ai une liste et en utilisant * ngfor je remplis ma table.

Mais après Footable.init() perd la liaison de la méthode deactivateHospital(). Et quand j'essaye d'employer l'événement de clic, deactivateHospital() ne fonctionne pas. Si je commente piedable alors mon code fonctionne bien. Une idée de comment lier mon deactivateHospital() en arrière? Je sais que la bibliothèque javascript externe cause un problème. Avons-nous une solution pour cela?

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

// Code angulaire

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

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

Answer 1

J'ai eu le même problème dans angulaire 4 et 5 avec le FooTable. Mais quand j'ai changé le tag a sur un bouton, il a recommencé à fonctionner. J'ai ensuite stylisé le bouton pour ressembler à une étiquette.

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