Angular2 Ngfor點擊的toogle不起作用

Question

我'上angular2項目的工作，在組件（HTML），我有這樣的 結構：

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

在我的組件（.TS）當我嘗試片斷下面的代碼：這是應該Mylabel的 hidde內容點擊的時候，但沒有發生

  $('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') 

      }); 

做什麼我'錯了嗎？

Answer 1

不是一個好主意，有jQuery的具有角。爲什麼在你的模板不使用元素的點擊事件，並在組件中定義事件處理程序綁定它：

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

檢查這對於更好地理解在How to perform DOM manipulation in Angular components而不使用jQuery。