内联 CSS 与 angular 插值

Question

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

例如

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

我试过下面显示的代码，但它不起作用。

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

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

Answer 1

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

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

另一种方法：

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

Answer 2

这样试试：

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

Answer 3

遵循 angular 风格指南，我建议使用 [ngStyle]:

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

Answer 4

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

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

Answer 5

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

对于： 时尚风格

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

并且对于： ngStyle 绑定

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

Answer 6

下面的代码片段对我有用

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