使用 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> 仍然有效。