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

ng-container 优于 template：

<ng-container *ngIf="expression">

看：

Angular 2 ng-container

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

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

您可以像这样简单地使用 <template> 标记并将 *ngIf 替换为 [ngIf]。

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

您不能将 div 直接放在 tr 中，否则会导致 HTML 无效。 tr 中只能包含 td/th/table 元素 &在它们里面你可以有其他的 HTML 元素。

您可以稍微更改您的 HTML 以使 *ngFor 超过 tbody &将 ngIf 置于 tr 之上，如下所示。

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

添加括号可解决此问题

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

你可以试试这个：

<ng-container *ngFor="let item of items;">
    <tr *ngIf="item.active">
        <td>{{item.name}}</td>
    </tr>
 </ng-container>
 

在这里，我在 ng 容器中进行了迭代循环，因此如果我想渲染或不渲染，它不会创建额外的 dom 和 tr 标签检查条件。