Question

为什么Angular（4）中的安全导航操作符不能使用属性绑定？以下html代码会产生错误（因为它会尝试GET http://localhost:4200/null）

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

但是当我将其更改为以下表达式时，一切正常。

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

Answer 1

1）属性绑定

<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

，则Angular不会添加属性

现在只需打开带有img标记的chrome dev工具，然后尝试更改其src属性

$0.src = null

然后

$0.src = ''

以下是我对上述所有案例的看法：

Answer 2

在image值可用之前，它实际上是null。 {{}}用于字符串插值，就像添加src="null"一样。

只有当异步调用（Promise，Observable）返回一个值时，它才会从null变为实际值。

使用属性绑定

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

这样，src属性只会在值!= null时添加，因此浏览器不会尝试从网址'null'

中提取