[從 0 開始的 Angular 生活]No.23 在範本中使用安全導覽運算子

發表於 | 更新於 | 分類於

前言

安全導覽運算子 (Safe Navigation Operator) ，又是一個讓人摸不著頭緒的新名詞，讓我們一起看看吧。

安全導覽運算子 (Safe Navigation Operator)

直接在官網上搜尋 「template syntax」，這被官網歸納在模板的語法，相關說明如下：

這個運算子可以使用在 Template 內，語法相當的特別是一個問號在加上一個點 「?.」

直接從範例來了解如何使用吧！

前置準備

  • 今天有一個情境，需要改變原先我們 ngFor 使用的資料，因此修改如下：

app.component.ts

1
2
3
4
5
6
7
8
9
10
11
atticleData = [
  {
    "id": 1,
    "href": "http://blog.miniasp.com/post/2016/04/30/Visual-Studio-Code-from-Command-Prompt-notes.aspx",
    "subject": {
      "title": "從命令提示字元中開啟 Visual Studio Code 如何避免顯示惱人的偵錯訊息",
      "subtitle": ""
    },
    ...略
  },
]

因為資料結構改變了，所以 Template 也必須跟著調整

Template

1
2
3
<h2 class="post-title">
  <a [href]="item.href">{{ item.subject.title|lowercase|slice:-20 }}</a>
</h2>

測試看看是否仍能正常運行。

此時，如果還需要額外輸出一個副標題的話該怎麼做？

  • 很直覺的會回答可以使用內嵌繫結來達成

Template

1
2
3
4
<h2 class="post-title">
  <a [href]="item.href">{{ item.subject.title|lowercase|slice:-20 }}</a>
  <small>{{item.subject.subtitle}}</small>
</h2>

接著回到 app.component.ts 補一下第一筆資料的 subtitle 。

運行開發伺服器，觀察畫面呈現。

很好，一切都如預期執行。

使用安全導覽運算子 (Safe Navigation Operator)

前置作業準備完成後，現在要模擬另一種情境。

這些資料在正式開發的時候，都會藉由 API 向後端取得資料，而從前端的角度來看，沒有辦法確保後端給我們的資料一定是完整的。

舉例來說，可能第一筆資料內有 subject 屬性，但第二筆就沒有 subject 屬性了，此時就會產生問題。

像是這樣，第一筆資料之後的文章都沒有顯示出來。

該怎麼辦呢？

這時候安全導覽運算子 (Safe Navigation Operator)就派上用場啦！

使用方式就是在可能會是 null 或是 undefined 的這些屬性或者是變數名稱後面加上一個問號而已。

Template

1
2
3
4
<h2 class="post-title">
  <a [href]="item.href">{{ item.subject?.title|lowercase|slice:-20 }}</a>
  <small>{{item.subject?.subtitle}}</small>
</h2>

在這個情境裡 subject 不存在，所以當嘗試存取 subject 時會跳出 undefined ，而 undefined 並不是物件，所以沒有屬性 subtitle 。

因此必須於 subject 後面補上一個 ?

接著運行開發伺服器，觀察情況吧！

搞定！只要在屬性後方補上問號，就會形成安全導覽屬性。

這個語法可以幫助 Angular 去判斷如果該屬性為 null 或是 undefined 的話，會直接回傳 null 就不會嘗試讀取這個屬性，也就不會出錯了。

這就是安全導覽運算子好用的地方，可以避免 Template 出現諸如此類的問題，另外安全導覽運算子只能使用在 Template 內。

0%