* ngIf y * ngFor en el elemento [duplicado]

Question

* ngIf y * ngFor en el elemento [duplicado]

Esta pregunta ya tiene una respuesta aquí:

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

Tengo una situación en la que necesito *ngIf y *ngfpara una directiva sobre el mismo elemento. Encontré muchas respuestas en el stackoverlow, pero ninguna para este tipo de situación.

Tengo una tabla en la que estoy buceando a través de la matriz de objetos y escribir dinámicamente celdas en 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 visible establecido en true. ¿Cómo puedo lograr esto?

24

angular angular2-directives

Author: Igor Janković, 2016-11-29

Source

4 answers

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 se analizará dentro de html.

9

Author: Igor Janković,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-29 08:32:53

También puedes usar ngclass para eso

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

2

Author: Sriram,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-29 09:36:17

También puedes usar el elemento template :

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

Esto funcionará para ti.

1

Author: Avnesh Shakya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-29 08:58:33

score 66 · Accepted Answer

Puede usar el elemento helper <ng-container> para eso.

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

No se añade al DOM.

66

Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-08 16:28:36