更新到angular2 beta 8

现在从angular2 beta 8开始，我们可以在同一个组件上使用*ngIf和*ngFor。

可选:

有时我们不能在tr、th (table)或li (ul)中使用HTML标记。我们不能使用另一个HTML标签，但我们必须在相同的情况下执行一些操作，所以我们可以HTML5功能标签<template>以这种方式。

ngFor使用模板:

<template ngFor #abc [ngForOf]="someArray">
    code here....
</template>

ngIf使用模板:

<template [ngIf]="show">
    code here....
</template>    

有关angar2中结构指令的更多信息，请参见这里。

在Angular中，你不能在同一个元素上使用多个结构指令，这会造成严重的混乱和结构，所以你需要在两个独立的嵌套元素中应用它们(或者你可以使用ng-container)，阅读Angular团队的这句话:

One structural directive per host element Someday you'll want to repeat a block of HTML but only when a particular condition is true. You'll try to put both an *ngFor and an *ngIf on the same host element. Angular won't let you. You may apply only one structural directive to an element. The reason is simplicity. Structural directives can do complex things with the host element and its descendents. When two directives lay claim to the same host element, which one takes precedence? Which should go first, the NgIf or the NgFor? Can the NgIf cancel the effect of the NgFor? If so (and it seems like it should be so), how should Angular generalize the ability to cancel for other structural directives? There are no easy answers to these questions. Prohibiting multiple structural directives makes them moot. There's an easy solution for this use case: put the *ngIf on a container element that wraps the *ngFor element. One or both elements can be an ng-container so you don't have to introduce extra levels of HTML.

所以你可以使用ng-container (Angular4)作为包装器(将从dom中删除)，如果你有class或其他一些属性，可以使用div或span:

<div class="right" *ngIf="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</div>

Angular v2不支持同一个元素上有多个结构指令。 作为一种变通方法，使用<ng-container>元素，它允许您为每个结构指令使用单独的元素，但它不会被标记到DOM中。

<ng-container *ngIf="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</ng-container>

<ng-template> (Angular v4之前的<template>)允许做同样的事情，但使用了不同的语法，这很容易混淆，不再推荐使用

<ng-template [ngIf]="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</ng-template>

这将起作用，但元素仍然在DOM中。

.hidden {
    display: none;
}

<div [class.hidden]="!show" *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
</div>

你可以用另一种方法检查数组长度

<div *ngIf="stuff.length>0">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</div>

我不想用*ngIf或使用[ngClass]将我的*ngFor包装到另一个div中，所以我创建了一个名为show的管道:

show.pipe.ts

export class ShowPipe implements PipeTransform {    
  transform(values: any[], show: boolean): any[] {
    if (!show) {
      return[];
    }
    return values;
  }
}

any.page.html

<table>
  <tr *ngFor="let arr of anyArray | show : ngIfCondition">
    <td>{{arr.label}}</td>
  </tr>
</table>