css - 如何通过 Angular 绑定(bind)值设置背景颜色

Question

我有一个显示图 block 的简单 Angular 应用程序(版本 4.2.6)。我想通过绑定(bind)到图 block 对象的值来设置这些图 block 的背景颜色。虽然设置图 block 的内容按预期工作，但设置颜色失败:

<div *ngFor="let tile of tiles" class="col-md-3 col-sm-6 col-xs-12" >
    <div style="border-style: solid;width: 150px;height: 150px;background-color:{{tile.color}};" class="tile">{{tile.name}}</div>
</div>

如何通过绑定(bind)值 tile.color 设置背景颜色(它包含颜色作为十六进制字符串)？

Answer 1

您可以使用[style.backgroundColor]="tile.color"

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