Angular 2隐藏一个项目

当我可以这样我只想隐藏所选的行......但是这种方法隐藏了整个表格..任何想法？Angular 2隐藏一个项目

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

来源

2017-05-06 M.angular2

您正在使用布尔变量'hide'，以便知道是否应该隐藏特定的行。这不可能工作。你怎么能知道，从一个布尔变量，*哪行*必须被隐藏？如何使用包含必须隐藏的行*的变量？为什么你隐藏了tds而不是隐藏tr？ –

你需要隐藏哪一行 –

你应该搬出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

来源

2017-05-06 17:44:29 elvin

Angular 2隐藏一个项目

回答

相关问题