css - 带角度插值的内联 CSS

Question

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

例如

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

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

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

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

标签： cssangularinlinebackground-colorstring-interpolation

Answer 1

使用[]来获取cardData.color没有的值，{{}}您也可以使用style.backgroundColor.

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

另一种方法：

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