Usando ngIf sem um elemento extra no Angular 2

107

Posso usar ngIfsem um elemento de contêiner extra?

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

Não funciona em uma tabela porque isso tornaria o HTML inválido.

html templates angular Janispritzkau
fonte

Respostas:

21

Encontrei um método para isso em: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template .

Você pode simplesmente usar a <template>tag e substituir *ngIfcom [ngIf]assim.

<template [ngIf]="...">
  ...
</template>
Janispritzkau
fonte
bom, mas * ngIf itslef cria uma templatetag, por padrão, o prefixo das diretivas angulares com * cria uma tag de modelo. então ambos são iguais[ngIf] and *ngIf
Pardeep Jain
1
Com *ngIfvocê tem um elemento dentro do modelo, você não terá se você escrever o templatemesmo. Sob certas circunstâncias, o elemento extra pode interferir.
Teca de
Podemos colocar templatetag dentro, tr/ tdtag?
Pankaj Parkar
Sim, é um elemento especial. Por definição, não é permitido w3.org/TR/html401/struct/tables.html#h-11.2.3, mas funcionará e renderizará. Se estou usando * ngIf não está funcionando btw. mas com [ngIf] sim. Posso perguntar se você pode me dizer por que isso acontece?
sascha10000
1
@ sascha10000 Porque ter *ngIf="foo"é equivalente à <template [ngIf]="foo">etiqueta de embrulho . Em suma, template+ []== *, então []! = *. *faz sentido em qualquer elemento, exceto template .
Franklin Yu
4

Você não pode colocar divdiretamente dentro tr, isso tornaria o HTML inválido. trsó pode ter td/ th/ tableelemento e dentro deles você pode ter outros elementos HTML.

Você poderia alterar um pouco o seu HTML para que se *ngForsobreponha tbodye se ngIfsobreponha tr, como abaixo.

<tbody *ngFor="...">
  <tr *ngIf="...">
    ...
  </tr>
  <tr  *ngIf="!...">
    ...
  </tr>
  ..
</tbody>
Pankaj Parkar
fonte
Basicamente, isso resolveria o problema, mas você trocaria a habilidade principal que obtém com o corpo. Se você tem uma mesa grande, pode consertar a cabeça e apenas rolar o corpo. Seu tbody teria a função de tr e tr teria a função de um invólucro adicional. Se não houver necessidade de rolar e fixar a cabeça no topo, esta é uma solução pragmática. Minha referência para o que eu disse: w3.org/TR/html401/struct/tables.html#h-11.2.3
sascha10000