你不能在同一个元素上使用ngFor和ngIf。你所能做的就是推迟填充你在ngFor中使用的数组，直到你的例子中的切换被单击。

这里有一个基本的(不是很好的)方法:http://plnkr.co/edit/Pylx5HSWIZ7ahoC7wT6P

正如@Zyzle提到的，以及@Günter在评论(https://github.com/angular/angular/issues/7315)中提到的，这是不支持的。

与

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

当列表为空时，没有空的<li>元素。甚至<ul>元素也不存在(正如预期的那样)。

填充列表时，没有多余的容器元素。

@Zyzle在他的评论中提到的github讨论(4792)也提出了另一个解决方案，使用<模板>(下面我使用您的原始标记‐使用<div>s):

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

这个解决方案也没有引入任何额外/冗余的容器元素。

更新到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 1中也是有效的。x在Angular 2中是不允许的。 你可以在这里找到更多信息:https://github.com/angular/angular/issues/7315

2016年角2

解决方案是使用<template>作为占位符，因此代码如下所示

<template *ngFor="let nav_link of defaultLinks"  >
   <li *ngIf="nav_link.visible">
       .....
   </li>
</template>

但出于某种原因，上述在2.0.0-rc中不工作。在那种情况下你可以用这个

<template ngFor let-nav_link [ngForOf]="defaultLinks" >
   <li *ngIf="nav_link.visible">
       .....
   </li> 
</template>

2018年最新答案

随着更新，现在在2018年angular v6推荐使用<ng-container>而不是<template>

这是最新的答案。

<ng-container *ngFor="let nav_link of defaultLinks" >
   <li *ngIf="nav_link.visible">
       .....
   </li> 
</ng-container>

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

.hidden {
    display: none;
}

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

<！——因为angular2稳定发布的多个指令不支持单个元素(来自文档)，你仍然可以像下面这样使用它——> < ul类= "列表组" > <template ngFor let-item [ngForOf]="stuff" [ngForTrackBy]="trackBy_stuff"> <李* ngIf = " item.name " class = " list-group-item > {{item.name}} < /李> < /模板> < / ul >

下表仅列出具有“初学者”值集的项目。 需要*ngFor和*ngIf来防止html中不需要的行。

最初有*ngIf和*ngFor在同一个<tr>标签上，但不工作。 为*ngFor循环添加了一个<div>，并将*ngIf放在<tr>标签中，如预期的那样工作。

<table class="table lessons-list card card-strong ">
  <tbody>
  <div *ngFor="let lesson of lessons" >
   <tr *ngIf="lesson.isBeginner">
    <!-- next line doesn't work -->
    <!-- <tr *ngFor="let lesson of lessons" *ngIf="lesson.isBeginner"> -->
    <td class="lesson-title">{{lesson.description}}</td>
    <td class="duration">
      <i class="fa fa-clock-o"></i>
      <span>{{lesson.duration}}</span>
    </td>
   </tr>
  </div>
  </tbody>

</table>

在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>

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

你不能在同一个元素上使用多个结构指令。在ng-template中包装你的元素，并在那里使用一个结构指令

你也可以使用ng-template(而不是template。在同一个HTML元素上同时应用*ngFor和ngIf，请参见使用模板标签的注意事项)。下面是一个例子，你可以同时使用*ngIf和*ngFor来处理angular表中的同一个tr元素。

<tr *ngFor = "let fruit of fruiArray">
    <ng-template [ngIf] = "fruit=='apple'>
        <td> I love apples!</td>
    </ng-template>
</tr>

where fruiArray = ['apple'， 'banana'， 'mango'， 'pineapple']。

注意:

只使用template标记而不使用ng-template标记的警告是，它会在某些地方抛出StaticInjectionError。

在html中:

<div [ngClass]="{'disabled-field': !show}" *ngFor="let thing of stuff">
    {{thing.name}}
</div>

在css中:

.disabled-field {
    pointer-events: none;
    display: none;
}

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

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

另一个解决方案可能是在你的for循环中放一个空数组，如果你不想显示它

<div *ngFor="let thing of show ? stuff : []">

哪里的“东西”是一个数组的“东西”和“显示”布尔显示或不内容

我不想用*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>

我用这个解决我的问题

<ng-container *ngFor="let item of menuItems">
  <li *ngIf="canShowItem(item)"></li>
</ng-container>