我正在使用 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]+')'}"
所以我的问题是如何更正第一个代码才能获得图像？
【问题讨论】：
标签： javascript angular ionic-framework dynamic background
我认为该值是作为样式分配的，但是当它无效时浏览器会删除它。
举个例子：
<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>
【讨论】：
*ngIf="colors?.length > 0" 和一个 *ngFor="let test of tests | async" ，它们都保证除非定义了这些变量，否则不会执行下面的代码。在我的例子中，div实际上被加载到视图中，我可以看到只有背景缺失的内容。 （如果我没记错的话，如果变量未定义，我将根本看不到该组件）。您是否有解决此问题的解决方案？
console.log(value) 来输出结果。目视检查结果以确保其正确。当您在模板中有这样的表达式时，您无法在运行时判断结果是什么。
../assets 中删除相对路径。 Angular 中的 assets 文件夹不是相对的。
../。现在一切都很好。毕竟语法是正确的。谢谢你所有的帮助，先生。竖起大拇指！