Angular:如何将异步属性数据绑定(bind)到背景图像

Question

我正在尝试在 Angular div 上设置背景图像。

'image.imagrURL | async' 仅在将其分配给普通的“img”标签时效果很好。

我遇到的问题是尝试将其分配给内联背景图像

问题是:如何修改下面的代码片段才能工作？ :)

HTML

 <div [ngStyle]="{'background-image': 'url(' + image.imageurl | async  + ')'}">

错误

Parser Error: Missing expected }

我不完全确定应该去哪里。

谢谢你。

Answer 1

添加括号会有所帮助，因为您正在尝试在 'url(' + image.imageurl 上调用异步管道

以这种方式尝试:

<div [ngStyle]="{'background-image': 'url(' + (image.imageurl | async)  + ')'}">