Angular：如何将异步属性数据绑定到背景图像答案

【问题标题】：Angular: How to data-bind an async property to a background imageAngular：如何将异步属性数据绑定到背景图像
【发布时间】：2018-03-27 19:33:29
【问题描述】：

我正在尝试在有角度的 div 上设置背景图像。
- 'image.imagrURL |仅将 async' 分配给普通的“img”标签时效果很好。
- 我遇到的问题是尝试将其分配给内嵌背景图像时

问题是：如何修改下面的 sn-p 才能工作？ :)

HTML

 &lt;div [ngStyle]="{'background-image': 'url(' + image.imageurl | async  + ')'}"&gt;

错误

解析器错误：缺少预期的 }

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

谢谢。

【问题讨论】：

【解决方案1】：

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

这样试试：

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

【讨论】：

太棒了！谢谢！
请注意，如果此元素在异步任务解决之前加载，应用程序可能会向服务器请求“null”或“undefined”；这很可能会发生。考虑添加 Angular 4 引入的特殊 *ngIf 语法。即：