Utilisation de ngIf sans élément supplémentaire dans Angular 2

107

Puis-je utiliser ngIfsans élément de conteneur supplémentaire?

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

Cela ne fonctionne pas dans un tableau car cela rendrait du HTML invalide.

html templates angular janispritzkau
la source

Réponses:

21

J'ai trouvé une méthode pour cela sur: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template .

Vous pouvez simplement utiliser la <template>balise et la remplacer *ngIfpar [ngIf]celle-ci.

<template [ngIf]="...">
  ...
</template>
janispritzkau
la source
good but * ngSi itslef crée une templatebalise, par défaut le préfixe des directives angulaires avec * crée une balise de modèle. donc les deux sont identiques[ngIf] and *ngIf
Pardeep Jain
1
Avec *ngIfvous avez un élément à l'intérieur du modèle, vous n'en avez pas si vous écrivez vous- templatemême. Dans certaines circonstances, l'élément supplémentaire pourrait interférer.
Teak
Pouvons-nous mettre templatetag à l'intérieur, tr/ tdtag?
Pankaj Parkar
Oui, c'est une sorte d'élément spécial. Par définition, ce n'est pas autorisé w3.org/TR/html401/struct/tables.html#h-11.2.3 mais cela fonctionnera et restituera. Si j'utilise * ng, si cela ne fonctionne pas, btw. mais avec [ngIf] c'est le cas. Puis-je vous demander si vous pouvez me dire pourquoi?
sascha10000
1
@ sascha10000 Parce qu'avoir *ngIf="foo"équivaut à la <template [ngIf]="foo">balise d' emballage . En bref, template+ []== *, donc []! = *. *a du sens dans n'importe quel élément sauf template .
Franklin Yu
4

Vous ne pouvez pas mettre divdirectement à l'intérieur tr, cela rendrait du HTML invalide. trne peut contenir que l' élément td/ th/ tableet à l'intérieur, vous pouvez avoir d'autres éléments HTML.

Vous pouvez légèrement modifier votre HTML pour avoir *ngForplus tbodyet avoir ngIfsur trlui-même comme ci-dessous.

<tbody *ngFor="...">
  <tr *ngIf="...">
    ...
  </tr>
  <tr  *ngIf="!...">
    ...
  </tr>
  ..
</tbody>
Pankaj Parkar
la source
Cela résoudrait fondamentalement le problème, mais vous échangerez la capacité de base que vous obtenez avec le corps. Si vous avez une grande table, vous pouvez réparer la tête et simplement faire défiler le corps. Votre tbody aurait le rôle de tr et tr aurait le rôle de wrapper supplémentaire. S'il n'y a pas besoin de faire défiler et de fixer la tête en haut, c'est une solution pragmatique. Ma référence pour ce que j'ai dit: w3.org/TR/html401/struct/tables.html#h-11.2.3
sascha10000