Встроенный CSS с угловой интерполяцией

Question

Я работаю над Angular и пытаюсь динамически установить этот цвет фона div, основываясь на цвете, указанном "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' }"

Answer 2

ниже фрагмент кода работал для меня

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

Answer 3

Вы можете использовать как ngStyle , так и style bindings

Для: Стиль Binging

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

А для: ngStyle Binding

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

Answer 4

Используйте [ngStyle] для доступа к переменным из компонента.

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

Answer 5

Следуя руководству по угловым стилям, я рекомендую использовать [ngStyle] :

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

Answer 6

Попробуй так:

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