Javascript 具有颜色覆盖语法的动态背景图像-角度

我使用的是Ionic（基于角度），我想将一个图像设置为一个组件的背景，上面有一个颜色覆盖。当写入.css文件时，代码是正确的，但是当它是动态的（我用变量替换值）时，我的语法似乎不正确

这根本不会影响我的组件的背景：

[ngStyle] = "{'background': 'linear-gradient('+colors[test.number]+','+colors[0]+'),url(../assets/img/test-'+test.number+'.jpg)'}"

但是，这可以工作，但不会将图像作为背景，仅将颜色：

[ngStyle] = "{'background': 'linear-gradient('+colors[test.number]+','+colors[0]+')'}"

---

因此，我的问题是如何更正第一个代码，以获得图像？

我认为该值被指定为一种样式，但当它无效时，浏览器会将其删除

举个例子：

<div [ngStyle]="{'background': 'fooBar'}"></div>

然后在模板中

<div [ngStyle]="getBackground(colors[test.number],colors[0],test.number)"></div>

我理解你的观点，理解其背后的逻辑。但是，情况不应该是这样，因为在同一个div元素上，我有一个

*ngIf=“colors？”.length>0“

和一个

*ngFor=“let tests of tests | async”

，这两个变量都保证除非定义了这些变量，否则不会执行下面的代码。在我的例子中，div实际上加载到视图中，我可以看到缺少背景的内容。（如果我没有弄错，如果变量没有定义，我就根本看不到那个组件）。有没有解决方案可以解决这个问题？@EddyJusufi调用组件中的函数来生成样式对象。在返回之前，请调用

console.log（value）

以输出结果。目视检查结果以确保其正确。当模板中有这样的表达式时，您无法在运行时判断结果是什么。是否可以提供一个示例，说明如何在JS中生成样式对象以便能够打印它？@EddyJusufi尝试从

。/assets

中删除相对路径。Angular中的

assets

文件夹不是相对的。我应该感到羞愧。我的目标文件夹中缺少一个额外的

。/

。现在一切都很好。语法毕竟是正确的。谢谢你的帮助，先生。竖起大拇指！

public getBackground(start, end, num) {
    const style = {'background': `linear-gradient(${start},${end}),url(../assets/img/test-${num}.jpg)`};
    console.log(style);
    return style;
}

<div [ngStyle]="getBackground(colors[test.number],colors[0],test.number)"></div>