本文內容

將 ngIf 和 ngFor 彼此之間怎麼搭配使用的方法記錄下來。

structural directive

在 Angular 中的 ngIf 和 ngFor 都是叫做 structural directive。
在官方文件介紹 ngForOf 這個 API 的時候，有特別寫下以下這段話，

它有特別聲明，在使用 shorhand syntax (即: *ngIf, *ngFor 這種寫法) 的時候，在一個元素上只能使用一個 structural directive。

ngFor 和 ngIf 混用 - ng-container

那如果，透過 ngFor 遍歷某個陣列，而我想要用 ngIf 有條件的渲染其中的某些元素的話，要怎麼達到呢?!!
這個時候，我們就可以使用 ng-container 來達到這種效果喔
[View]

<ul>
  <ng-container *ngFor="let item of itemInfo">
    <li *ngIf="item.visible">
      {{ item.name }}
    </li>
  </ng-container>
</ul>

[TypeScript]

export class AppComponent {
  itemInfo = [
    { name: 'cup', visible: true },
    { name: 'coffee', visible: true },
    { name: 'tea', visible: true },
    { name: 'chocolate', visible: false },
  ];
}

有看到上面的範例，我們將 ngFor 的內容放到 ng-container 元素上，接著，才在裡面放入 ngIf 來判斷是否該元素的屬性有符合條件，若有才會為它渲染出屬於它的 li 元素。
另外，ng-container 是不會產生出額外的 DOM 在你的網頁上喔，所以，不用擔心會不會又需要額外產出不必要的 DOM 出來。

ngFor 和 ngIf 混用 - ng-template

除了用 ng-container 可以達成 ngFor 和 ngIf 的混用，我們也可以利用 ng-template 來達成喔，止步過寫法上就比較不一樣了。會造成寫法上的不一樣是因為 ng-template 是沒有辦法直接寫入 shorthand syntax 的內容，即像是: *ngFor, *ngIf 這種簡寫的 syntax 是沒有辦法直接加在 ng-template 上，我們必須把整個內容都寫上去才行。
那麼就來改寫一下上面的範例吧
[View]

<ul>
  <ng-template ngFor let-item [ngForOf]="itemInfo">
    <li *ngIf="item.visible">
      {{ item.name }}
    </li>
  </ng-template>
</ul>

[TypeScript]

export class AppComponent {
  itemInfo = [
    { name: 'cup', visible: true },
    { name: 'coffee', visible: true },
    { name: 'tea', visible: true },
    { name: 'chocolate', visible: false },
  ];
}

用 ng-template 的寫法是不是有點冗呢 XDDD，所以，你如果不想寫那麼多的內容的話，就建議直接使用 ng-container 的寫法囉~~

Summary

這邊做個總結

1. 在 Angular 中有規定 一個元素上只能加入一個 structural directive 的內容。
2. 搭配 ng-container 或 ng-template ，來達到 ngFor 和 ngIf 混用的效果。

Reference

1. https://stackoverflow.com/questions/34657821/ngif-and-ngfor-on-same-element-causing-error
2. https://angular.io/api/common/NgForOf