ngStyle 背景图像内的插值答案

【问题标题】：Interpolation inside ngStyle background ImagengStyle 背景图像内的插值
【发布时间】：2019-11-26 00:52:17
【问题描述】：

我查看了在 stackoverflow 中找到的类似答案，但没有运气。如何正确使用 ngStyle 内的插值作为背景图像？

这是我使用的代码：

<div mat-card-avatar class="header-image" ngStyle = "{'background-image': 'url(' + {{cardData.image}} + ')'}"></div>

我收到错误：找不到不同的支持对象 '{'background-image': 'url(' + ../../assets/image/photo.png + ')'}' at ... ..

【问题讨论】：

【解决方案1】：

[ngStyle]="'{background-image: url(' + {{cardData.image}} + ')}'"

不确定它是否可能，但这对于引号是正确的

【讨论】：

【解决方案2】：

你不能在ngStyle里面使用插值，你必须使用[ngStyle]="{'background-image': 'url(' + cardData.image + ')'}"

试试这样：

<div mat-card-avatar class="header-image" [ngStyle]="{'background-image': 'url(' + cardData.image + ')'}">

【讨论】：

【解决方案3】：

尝试将您的 ngStyle 属性包含在方括号中：

[ngStyle]="...

【讨论】：