angular - example - * ngIf y*ngFor en el elemento<td></td>

directive angular 6 example

Question

Esta pregunta ya tiene una respuesta aquí:

• * ngIf y * ngFor en el mismo elemento que causa respuestas de error 11

Tengo una situación en la que necesito las directivas * ngIf y * ngFor en el mismo elemento. Encontré muchas respuestas en el stackoverlow pero ninguna para este tipo de situación.

Tengo una tabla en la que hago un bucle a través de la matriz de objetos y escribo dinámicamente celdas en el encabezado:

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

Quiero mostrar / ocultar si el objeto contiene un conjunto visible como verdadero. ¿Cómo puedo conseguir esto?

Answer 1

La respuesta de Günter Zöchbauer es genial. También he encontrado una solución más.

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

Pero este será analizado dentro de html.

Answer 2

Puedes usar el elemento de ayuda <ng-container> para eso.

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

No se agrega al DOM.

Answer 3

También puede utilizar el elemento de plantilla :

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

Esto funcionará para usted.

Answer 4

También puedes usar ngclass para eso

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