Angular5 - 动态设置div容器的颜色

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>

Docs

如何使用ngStyle

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

<some-element [ngStyle]="objExp">...</some-element>