屬性綁定中的角度安全導航運算符

Question

爲什麼Angular（4）中的安全導航運算符不能使用屬性綁定？下面的HTML代碼會產生一個錯誤（因爲它會嘗試GEThttp://localhost:4200/null）

<img [src]="(image | async)?.url" /> 

但是當我將其更改爲下面的表達式，一切工作正常。 image值變爲可用

<img src="{{(image | async)?.url}}" /> 

Answer 1

1）屬性來獲取src屬性將只被添加結合

<img [src]="(image | async)?.url" /> 

產生分配：

img.src = null; 

2）插值

<img src="{{(image | async)?.url}}" /> 

我稱之爲字符串化的屬性綁定

我們可以期待轉換成字符串，但到字符串化角度後的結果img.src = 'null';因爲null是'null'執行以下代碼：

'' + _toStringWithNull(null) + '' 
         ^^^^ 
        value from Pipe 

其中_toStringWithNull函數看起來像：

function _toStringWithNull(v) { 
    return v != null ? v.toString() : ''; 
} 

所以結果將是：

img.src = ''; 

3）屬性綁定

角如果值是null將不添加屬性

---

現在只要打開Chrome瀏覽器開發工具空img標籤，並嘗試改變其SRC屬性

$0.src = null 

然後

$0.src = '' 

這裏是我看到所有上述情況下， ：

Answer 2

之前，它實際上是null。 {{}}用於字符串插值，就像添加src="null"一樣。

僅當異步調用（Promise，Observable）返回一個值時，它纔會從null更改爲實際值。

使用屬性結合，而不是

<img [attr.src]="(image | async)?.url" /> 

這樣，當值!= null，因此瀏覽器不會嘗試從URL 'null'