web-dev-qa-db-fra.com

* ngIf et * ngFor sur l'élément <td> </ td>

J'ai une situation où j'ai besoin des directives * ngIf et * ngFor sur le même élément. J'ai trouvé beaucoup de réponses sur le stackoverlow mais aucune pour ce type de situation.

J'ai une table dans laquelle je parcours en boucle le tableau d'objets et écris dynamiquement des cellules dans l'en-tête:

 <table border="1" width="100%">
        <thead>
            <tr>
                <td *ngFor="let item of headerItems" *ngIf="item.visible">{{ item?.name }}</td>
            </tr>
        </thead>
        <tbody>
            ...
        </tbody>
    </table>

Je veux afficher/masquer si l'objet contient visible défini à true. Comment puis-je atteindre cet objectif?

angularangular2-directives
32
Igor Janković

Vous pouvez utiliser le <ng-container> élément d'assistance pour cela.

<ng-container *ngFor="let item of headerItems" >
 <td *ngIf="item.visible">{{ item?.name }}</td>
</ng-container>

Il n'est pas ajouté au DOM.

83
Günter Zöchbauer

La réponse de Günter Zöchbauer est excellente. J'ai aussi trouvé une solution supplémentaire.

<td *ngFor="let item of headerItems" [hidden]="!item.visible">{{ item?.name }}</td>

Mais celui-ci sera analysé à l'intérieur du langage HTML.

10
Igor Janković

Vous pouvez aussi utiliser template element:

<template ngFor let-item [ngForOf]="headerItems ">
   <td *ngIf="item.visible">{{ item?.name }}</td>
</template>

Cela fonctionnera pour vous.

2
Avnesh Shakya

Vous pouvez également utiliser ngclass pour cela

 .hidecell{
     display:none;
  }
<td *ngFor="let item of headerItems"  [ngClass]="{hidecell:item.isVisible}">
 {{ item?.name }}
</td>
1
Sriram