Question

我知道在Angular中你可以动态地向元素添加一个类但是如何更改属性的值？我希望每个按钮成为数组的下一个spotColour。我觉得我的例子很好地解释了它：

<button style="background-color: arrThemes[0]['spotColour']"></button>
<button style="background-color: arrThemes[1]['spotColour']"></button>
<button style="background-color: arrThemes[2]['spotColour']"></button>

arrThemes = [
  {spotColour : 'rgb(238, 68, 136)', baseColour : 'rgb(80, 54, 78)'},
  {spotColour : 'rgb(179, 165, 136)', baseColour : 'rgb(88, 67, 59)'},
  {spotColour : 'rgb(87, 167, 82)', baseColour : 'rgb(47, 68, 46)'},
];

Answer 1

尝试使用

这样的表达式

<button style="{{ 'background-color: ' + arrThemes[0]['spotColour'] }}"></button>

或使用NgStyle

以更民事的方式

<button [ngStyle]="{'background-color': arrThemes[0]['spotColour']}"></button>

Answer 2

使用ngStyle标记动态添加样式

<button *ngFor="let item of arrThemes " [ngStyle]="{'background-color': item.spotColour }"></button>

Answer 3

你可以使用ngStyle angular指令。

如下所示

<button [ngStyle]="{'background-color': arrThemes[0]['spotColour']}"></button>

从数组值更改Css

3 个答案: