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

Question

Puis-je utiliser ngIf sans élément conteneur supplémentaire?

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

Cela ne fonctionne pas dans une table car cela rendrait du HTML invalide.

Answer 1

ng-container est préférable à template:

<ng-container *ngIf="expression">

Voir:

conteneur 2 ng angulaire

https://github.com/angular/angular.io/issues/23

Answer 2

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 balise <template> et remplacer *ngIf par [ngIf] comme ceci.

<template [ngIf]="...">
  ...
</template>

Answer 3

Vous ne pouvez pas mettre div directement dans tr, cela rendrait le code HTML invalide. tr ne peut contenir que des éléments td/th/table et vous pouvez y insérer d'autres éléments HTML.

Vous pouvez légèrement changer votre code HTML pour avoir *ngFor sur tbody et avoir ngIf sur tr comme ci-dessous.

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