*ngIf et * ngFor sur l'élément [duplicate]
cette question a déjà une réponse ici:
- *ngIf et *ngFor sur le même élément à l'origine erreur 11 réponses
j'ai une situation où j'ai besoin d' *ngIf et *ngFor la directive sur le même élément. J'ai trouvé beaucoup de réponses sur le stackoverlow mais aucun pour ce type de situation.
j'ai une table dans laquelle je suis en boucle à travers le tableau des objets et écrire 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/cacher si l'objet contient visible défini à true. Comment puis-je y parvenir?
4 réponses
vous pouvez utiliser l'élément d'aide <ng-container> 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.
la réponse de Günter Zöchbauer est excellente. J'ai aussi trouvé la solution.
<td *ngFor="let item of headerItems" [hidden]="!item.visible">{{ item?.name }}</td>
mais celui-ci sera traité en html.
vous pouvez également utiliser ngclass pour que
.hidecell{
display:none;
}
<td *ngFor="let item of headerItems" [ngClass]="{hidecell:item.isVisible}">
{{ item?.name }}
</td>
Vous pouvez utiliser modèle élément aussi:
<template ngFor let-item [ngForOf]="headerItems ">
<td *ngIf="item.visible">{{ item?.name }}</td>
</template>
ça va marcher pour vous.