带角度插值的内联 CSS

Question

我正在研究 Angular，并试图根据"cardData.color".

例如

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' }"