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

Question

我正在尝试在有角度的div上设置背景图像。
- 'image.imagrURL | 只需将其分配给简单的“ img”标签，“异步”效果很好。
- 我遇到的问题是尝试将其分配给嵌入式背景图片时

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

的HTML

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

错误

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

我不确定应该去哪里。

谢谢。

Answer 1

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

以这种方式尝试：

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

请注意，如果在异步任务解决之前加载此元素，则应用程序可能会从服务器请求“null”或“undefined”；这很有可能发生。考虑添加 Angular 4 引入的特殊 *ngIf 语法。即： <div *ngIf="image | async; let image; else loading" [ngStyle]="{'background-image': 'url(' + (image. imageurl | async) + ')'}"></div> <template #loading>图像正在加载...</template> (2认同)