带角度插值的内联 CSS答案

【问题标题】：Inline CSS with angular interpolation带角度插值的内联 CSS
【发布时间】：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>

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

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：