Angular 2隱藏一個項目

Question

當我可以這樣我只想隱藏所選的行......但是這種方法隱藏了整個表格..任何想法？

<tr *ngFor="let coll of pagedItems"> 
<template [ngIf]="hide">  
<td><i title="Editer le Collaborateur" data-toggle="modal" data-target="#myModalNorm" class="ion-edit ion-white" [class.selected]="isSelected(coll)" (click)="EditColl(coll)"></i> 
       <i title="Supprimer le Collaborateur" (click)="DeleteColl(coll)" class="ion-trash-a"></i></td> 

      <td hidden>{{coll.id}}</td> 
      <td>{{coll.cin}}</td> 
      <td>{{coll.lastname | uppercase}}</td> 
      <td>{{coll.firstname}}</td> 
      <td>{{coll.email | lowercase}}</td> 
      <td>{{coll.datenaissance }}</td> 
      <td>{{coll.dateembauche}}</td> 
      </template> 
      </tr> 

Answer 1

你應該搬出tr元素外的模板，做ngFor那裏，把一個ngIf的每一行的基礎上，標誌來確定是否顯示或不排：

<tbody> 
    <template ngFor let-coll [ngForOf]="pagedItems" [ngForTrackBy]="id"> 
    <tr *ngIf="coll.active"> 
     <td><i title="Editer le Collaborateur" data-toggle="modal" data-target="#myModalNorm" class="ion-edit ion-white" [class.selected]="isSelected(coll)" (click)="editColl(coll)"></i> 
     <button (click)="deleteColl(coll); $event.preventDefault()">Supprimer le Collaborateur</button></td> 

     <td hidden>{{coll.id}}</td> 
     <td>{{coll.cin}}</td> 
     <td>{{coll.lastname | uppercase}}</td> 
     <td>{{coll.firstname}}</td> 
     <td>{{coll.email | lowercase}}</td> 
     <td>{{coll.datenaissance }}</td> 
     <td>{{coll.dateembauche}}</td> 
    </tr> 
    </template> 
</tbody> 

您可以看到它正在工作here