我用这个解决我的问题

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

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

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

下表仅列出具有“初学者”值集的项目。 需要*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 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>

正如@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>

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