属性绑定中的角度安全导航运算符

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'