本文內容

學習怎麼使用 Angular 的 *ngIf 語法。

ngIf 的作用

讓你可以有條件地去選擇要不要渲染某些內容在畫面上。
ngIf 有以下三種屬性
ngIf: 在 ngIf 會接一個判斷條件，這個判斷條件會回傳布林值，以此來決定是否要渲染指定的內容。
ngIfThen: 如果判斷條件是 true，就會將 ngIfThen 指定的內容渲染到畫面上。
ngIfElse: 如果判斷條件是 false，就會將 ngIfElse 指定的內容渲染到畫面上。

ngIf 用法

我們直接把 *ngIf="condition" 寫在要被判斷的元素的 html 標籤上。

 --- app.component.html ---
 <div *ngIf="renderCondition">Content to render when condition is true.</div>
 
 <button (click)="renderCondition != renderCondition">Switch</button>
 
 -- app.component.ts --
export class AppComponent {
  renderCondition = false;
} 

以上的範例，透過按下按鈕來切換 renderCondition 的布林值，以此決定是否 div 要不要被渲染到畫面上。

加入 else 和 ng-template

我們可以加入 ng-template 來負責渲染當判斷式為 false 的內容。

--- app.component.html ---
<div *ngIf="renderCondition; else elseContent">condition is true</div>
<ng-template #elseContent>
  <div>condition is false</div>
</ng-template>
<button (click)="renderCondition = !renderCondition">switch</button>

--- app.component.ts ---
export class AppComponent {
  renderCondition = false;
}

以上的範例，我們先用了 #elseContent 來取得目標元素內容。
接著，在 ngIf 判斷式裡面我們還有加上了 else 的內容，*ngIf="renderCondition; else elseContent"，這個判斷式的內容就是當 renderCondition 為 true 就呈現它所在元素的內容，若為 false，就呈現 elseContent 指定的內容。

加入 then 到判斷式中

除了將 else 加入判斷式裡面，我們再加入 then 到判斷式中。

--- app.component.html ---
<div *ngIf="renderCondition; then thenContent; else elseContent"></div>
<ng-template #thenContent>
  <div>condition is true</div>
</ng-template>
<ng-template #elseContent>
  <div>condition is false</div>
</ng-template>
<button (click)="renderCondition = !renderCondition">switch</button>

--- app.component.ts ---
export class AppComponent {
  renderCondition = false;
}

以上的範例，還額外用了 thenContent 來取得指定元素，用以渲染當判斷式為 true 時的內容。

用 else 來呈現替代的內容 - 處理非同步取得資料的情境

在實際的產品中，我們很常會需要非同步的去取得資料，那當資料還沒回傳的時候，該資料會是 undefined 的狀態，這會導致瀏覽器報錯，那這個時候，我們就可以用 ngIf 來判斷當要被渲染到畫面上的資料為 undefined 的時候，呈現其他的內容，例如: 等待畫面。

@Component({
  selector: 'ng-if-as',
  template: `
    <button (click)="nextUser()">Next User</button>
    <br>
    <div *ngIf="getUserInfo; else loading">
      <p *ngFor="let user of userInfo">
        {{ user.name }}
      </p>
    </div>
    <ng-template #loading >Waiting...</ng-template>
`
})
export class NgIfAs {
  userInfo = []
  
  getUserInfo() {
    // 非同步取得 userInfo 資料
  }
  
  ngOnInit () {
    this.getUserInfo()
  }
}

以上這個範例，就是會先去非同步取得使用者的資料，並利用 ngIf 先去判斷是否 userInfo 有資料，若沒有就先呈現 loading 的畫面。

Summary

這邊做個總結

1. 我們可以透過 ngIf 來看判斷式回傳的結果是 true 或 false，來決定被指定元素是否要被渲染到畫面上。
2. 若要加入 else 到 ngIf 的判斷式中的話， else 要呈現的元素必須要被包在 ng-template 裡面。
3. 可以利用 ngIf 來防止當指定茲要還沒被取得完成時，呈現另外的 loading 畫面。

Reference

1. https://angular.io/api/common/NgIf