动态背景图像与颜色叠加语法 - 角度

Question

我正在使用Ionic（基于Angular），我想将图像设置为组件的背景，其上方有颜色叠加。 写入.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]+')'}"

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

Answer 1

我认为该值被指定为样式，但浏览器在无效时将其删除。

举个例子：

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

当我在Angular中运行上面的例子时。 我在浏览器中看到了这一点。

<div _ngcontent-c18="" ng-reflect-ng-style="[object Object]"></div>

当我使用Chrome的检查器时，该元素缺少background样式。

这告诉我Angular分配了无效的CSS样式，但浏览器忽略了它。

如果您的某个变量undefined则会引发问题。 它可以是colors ， colors[test.number] ， colors[0]或test.number 。

尝试使用组件上的函数生成样式对象，并将此值记录到控制台以确保它是正确的。

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>