介紹 安全導引運算子(?.) => 只能再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.)