Angular - safe navigation operator ( ?. )

  • 285
  • 0
  • 2018-05-14

介紹 安全導引運算子(?.) => 只能再template裡面使用

官網的介紹

這個operator只能使用再template,

template 使用的物件很多是透過後端傳送,當後端傳送的物件是null 或是者是undefined的時候,

在template 內還使用這個物件內的屬性(property path),就會出現錯誤

例如:

<span>The current hero's name is {{currentHero.name}}</span>

如果currentHero 是null 的時候,畫面就會crash

會跳出錯誤訊息:

TypeError: Cannot read property 'name' of null in [null].

為了避免currentHero 這個物件是null,我們可以使用*ngIf

<!--No hero, div not displayed, no error -->
<div *ngIf="nullHero">The null hero's name is {{nullHero.name}}</div>

或者是使用&& 

The null hero's name is {{nullHero && nullHero.name}}

來避免錯誤

以上兩個方法可以避免,但是使用起來會非常的cumbersome(笨重、累贅) ,

畢竟如果property path: a.b.c.d ...這樣寫下去的話會非常的壟長

 

這時候,Angular 提供的 safe navigation operator ( ?. ) 就是一個很好的解決方法

使用方法如下:

<span>The current hero's name is {{currentHero?.name}}</span>

如果currentHero 是null ,view 不會crash ,而是會顯示 The current hero's name is ,後面會顯示空白(blank)

當然,safe navigation operator 是支援 long property path (ex:a?.b?.c?.d.)