角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