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>

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

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

我用这个解决我的问题

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

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

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

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

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