在Angular 2中使用没有额外元素的ngIf

Question

我可以在没有额外容器元素的情况下使用ngIf吗？

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

它不能在表中工作，因为这会产生无效的HTML。

Answer 1

ng-container优先于template：

<ng-container *ngIf="expression">

请参阅：

Angular 2 ng-container

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

Answer 2

我在https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template上找到了一种方法。

您只需使用<template>代码，并将*ngIf替换为[ngIf]，就像这样。

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

Answer 3

您无法将div直接放在tr内，这会导致无效的HTML。 tr只能包含td / th / table元素。在其中你可以有其他HTML元素。

您可以稍微更改HTML，使*ngFor超过tbody＆amp;如下所示ngIf超过tr。

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

Answer 4

添加括号解决此问题

 <ng-container *ngIf="(!variable| async)"></ng-container>