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

Angular 2隐藏了一个项目

1 个答案: