使用 ngIf withngFor

Created: November-22, 2018

虽然不允许在同一个 div 中使用*ngIf 和*ngFor（它会在运行时出错），但你可以将*ngIf 嵌套在*ngFor 中以获得所需的行为。

示例 1：一般语法

<div *ngFor="let item of items; let i = index">
  <div *ngIf="<your condition here>">

   <!-- Execute code here if statement true -->

  </div>
</div>

示例 2：显示具有偶数索引的元素

<div *ngFor="let item of items; let i = index">
  <div *ngIf="i % 2 == 0">
    {{ item }}
  </div>
</div>

缺点是需要添加额外的外部 div 元素。

但是考虑一下需要迭代 div 元素的这个用例 （使用* ngFor），并且还包括检查是否需要删除元素（使用* ngIf），但是不希望添加额外的 div。在这种情况下，你可以使用 template 标签作为* ngFor：

<template ngFor let-item [ngForOf]="items">
    <div *ngIf="item.price > 100">
    </div>
</template>

这样就不需要添加额外的外部 div，而且 <template> 元素也不会添加到 DOM 中。从上面的例子中添加到 DOM 中的唯一元素是迭代的 div 元素。

注意：在 Angular v4 中，<template> 已被弃用，转而使用 <ng-template>，并将在 v5 中删除。在 Angular v2.x 版本中，<template> 仍然有效。