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>