动态设置div容器的Angular5颜色

Question

在AngularJS中，这个方法运行得很好：

<div style="width:10px;height:10px;background-color:{{user.color}}"></div>

但是对于Angular5，它不是。怎么用Angular5来做呢？

Answer 1

<div style="width:10px;height:10px;" [ngStyle]="{'background-color': user.color}">...</div>

或

<div [style.background-color]="user.color">...</div>

文档

如何使用ngStyle

<某些元素ngStyle=“{‘字体样式’：styleExp}”>.<某些元素ngStyle="{'max-width.px'：widthExp}“>……<某些元素ngStyle=”objExp“>.

Answer 2

您可以使用ngStyle或ngClass动态地执行它。

Answer 3

而不是使用内联css使用类。你可以使用ngClass

[ngClass]="user.color"

在属性中传递类名。因此，如果您想在css中添加更多的属性，那么这样就更容易了。