Angular2 Ngfor cliquez sur toogle ne fonctionne pas

Question

I'am travaillant sur un projet de angular2, dans le composant (html) Je cette structure:

<ul class="nav nav-list" > 
       <li> 
        <label class="tree-toggler nav-header"> 
        <i class="fa fa-plus-circle" aria-hidden="true"> 
         </i>Mylabel 
        </label> 
       </li> 
       <ul class="nav nav-list tree"> 
        <label class="groupcompte"> 
        <i class="fa fa-plus-circle" aria-hidden="true"> 
         </i>group_name: 
        </label> 
        <ng-container> 
         <!-- contain of group--> 
        </ng-container> 
       </ul> 
</ul> 

Dans mon composant (.ts) lorsque je tente l'extrait le code ci-dessous: qui est censé contenu Hidde de MyLabel en cliquant sur, mais rien ne se passe

  $('label.tree-toggler').click(function() { 
      $(this).parent().children(' ul.tree').toggle(300); 
      $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle') 

      }); 

      $('label.groupcompte').click(function() { 
      $(this).parent().find('tr.compte_in_groupe').toggle(300); 
      $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle') 

      }); 

ce que I'am faire le mal?

Answer 1

Pas une bonne idée d'avoir jQuery avec angulaire .. Pourquoi ne pas utiliser l'événement click de l'élément dans votre modèle et de se lier avec le gestionnaire d'événements défini dans le composant:

<button (click)="this.handleMe()">Button</button> 

Vérifiez ce pour une meilleure compréhension sur How to perform DOM manipulation in Angular components sans utiliser jQuery.