Usando ngIf sin un elemento adicional en Angular 2

107

¿Puedo usar ngIfsin un elemento contenedor adicional?

<tr *ngFor="...">
  <div *ngIf="...">
    ...
  </div>
  <div *ngIf="!...">
    ...
  </div>
</tr>

No funciona en una tabla porque haría HTML inválido.

html templates angular janispritzkau
fuente

Respuestas:

21

Encontré un método para eso en: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template .

Simplemente puede usar la <template>etiqueta y reemplazarla *ngIfcon algo [ngIf]así.

<template [ngIf]="...">
  ...
</template>
janispritzkau
fuente
bueno, pero * ng Si itslef crea una templateetiqueta, por defecto el prefijo de directivas angulares con * crea una etiqueta de plantilla. entonces ambos son iguales[ngIf] and *ngIf
Pardeep Jain
1
Con *ngIfusted tiene un elemento dentro de la plantilla, no hacer si se escribe el templatemismo. En determinadas circunstancias, el elemento adicional podría interferir.
Teca
¿Podemos poner templateetiqueta dentro, tr/ tdetiqueta?
Pankaj Parkar
Sí, es una especie de elemento especial. Por definición, no está permitido w3.org/TR/html401/struct/tables.html#h-11.2.3 pero funcionará y se renderizará. Si estoy usando * ng Si no funciona por cierto. pero con [ngIf] lo hace. ¿Puedo preguntar si puede decirme por qué?
sascha10000
1
@ sascha10000 Porque tener *ngIf="foo"es equivalente a la <template [ngIf]="foo">etiqueta de envoltura . En resumen, template+ []== *, entonces []! = *. *tiene sentido en cualquier elemento excepto template .
Franklin Yu
4

No se puede poner divdirectamente dentro tr, eso haría HTML inválido. trsolo puede tener td/ th/table elemento en él y dentro de ellos podría tener otros elementos HTML.

Se podría cambiar ligeramente el código HTML para tener *ngFormás tbodyy tienen ngIfmás de trsí, como a continuación.

<tbody *ngFor="...">
  <tr *ngIf="...">
    ...
  </tr>
  <tr  *ngIf="!...">
    ...
  </tr>
  ..
</tbody>
Pankaj Parkar
fuente
Básicamente resolvería el problema, pero intercambiarás la habilidad central que obtienes con tbody. Si tiene una mesa grande, puede arreglar la cabeza y simplemente desplazar el tbody. Tu tbody tendría el rol de tr y tr tendría el rol de un contenedor adicional. Si no es necesario desplazarse y fijar la cabeza en la parte superior, esta es una solución pragmática. Mi referencia para lo que dije: w3.org/TR/html401/struct/tables.html#h-11.2.3
sascha10000