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

Question

为什么 Angular(4) 中的安全导航运算符不能与属性绑定一起使用？以下html代码会产生错误（因为它会尝试GEThttp://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 开发工具并尝试更改其 src 属性

$0.src = null

然后

$0.src = ''

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

Answer 2

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

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

改用属性绑定

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

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