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

Posted 2023-02-23

【中文标题】Angular：如何将异步属性数据绑定到背景图像

【英文标题】：Angular: How to data-bind an async property to a background image

【发布时间】：2018-03-27 19:33:29

【问题描述】：

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

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

HTML

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

错误

解析器错误：缺少预期的

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

谢谢。

【参考方案1】：

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

这样试试：

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

【讨论】：

太棒了！谢谢！

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