具有彩色叠加语法的动态背景图像-角度

我认为该值被指定为一个样式,但是浏览器在 无效 .

举个例子:

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

当我以角度运行上面的例子时。我在浏览器中看到这个。

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

元素缺少 background 当我使用Chrome的Inspector时。

这告诉我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>