带角度插值的内联 CSS

Posted 2023-03-13

【中文标题】带角度插值的内联 CSS

【英文标题】：Inline CSS with angular interpolation

【发布时间】：2019-11-20 19:58:26

【问题描述】：

我正在使用 Angular 并尝试根据"cardData.color" 指定的颜色动态设置此 div 背景颜色。

例如

cardData = id: '1', color: '#202020';

我已经尝试了下面显示的代码，但它不起作用。

<div style="background-color: cardData.color; padding: 10px 20px;"></div>

有什么办法可以根据对象的颜色动态设置背景颜色吗？谢谢。

【问题讨论】：

Generate dynamic css based on variables angular的可能重复

【参考方案1】：

使用[] 获取cardData.color 的值而不使用 也可以使用style.backgroundColor。

<div [style.backgroundColor]="cardData.color" style="padding: 10px 20px;"></div>

另一种方法：

[ngStyle]="'background-color': cardData.color , 'padding': '10px 20px' "

【参考方案2】：

试试这样：

<div [style.background-color]="cardData.color" style="padding: 10px 20px;"></div>

【讨论】：

backgroundColor 没有background-color!!

【参考方案3】：

按照角度风格指南，我建议使用[ngStyle]：

<div  [ngStyle]="'background-color': cardData.color">...</div >

【参考方案4】：

您可以同时使用 ngStyle 和 style 绑定

对于： 风格结合

<div [style.backgroundColor] = "cardData.color"></div>

对于： ngStyle 绑定

 <div [ngStyle] = " backgroundColor: cardData.color"></div>

【参考方案5】：

使用[ngStyle] 可以访问组件中的变量。

<div [ngStyle]="'background-color': cardData.color, 'padding': '10px 20px'">Some Content</div>

【参考方案6】：

下面的代码 sn-p 对我有用

<div [ngStyle]="'background-color':cardData.color"></div>