iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

新新新手閱讀 Angular 文件30天系列 第 18

新新新手閱讀 Angular 文件 - ngIf - Day18

本文內容

學習怎麼使用 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

上一篇
新新新手閱讀 Angular 文件 - DataBinding - Day17
下一篇
新新新手閱讀 Angular 文件 - ngFor(1) - Day19
系列文
新新新手閱讀 Angular 文件30天30

尚未有邦友留言

立即登入留言