Angular：如何将异步属性绑定到背景图像？

Question

• 我正在尝试使用Angular在div上设置背景图像。
  • 当将'image.imageURL | async'分配给普通的 'img' 标签时，它可以正常工作。
  • 但是，当尝试将其分配给内联背景图像时，我遇到了问题。

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

HTML

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

错误

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

我不太确定它应该放在哪里。

谢谢。

- user8516249

Answer 1

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

可以尝试以下方式：

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

- Jaroslaw K.

---

太棒了！谢谢！ - user8516249

请注意，如果该元素在异步任务解决之前加载，应用程序可能会向服务器请求'null'或'undefined'。这种情况相当常见。考虑使用Angular 4中引入的特殊*ngIf语法，例如：<div *ngIf="image | async; let image; else loading" [ngStyle]="{'background-image': 'url(' + (image.imageurl | async) + ')'}"></div> <template #loading>图片正在加载...</template> - kursattokpinar