HTML：使用数据属性添加背景样式

Question

我想将对象内部传递的颜色传递给图标标签的样式，如下所示：

  <div class="icon-box" style="background: ${data.color}">
    <i class="material-icons">{{ data.icon }}</i>
  </div>

我的对象是这样的：

  {
    icon: 'add_alert',
    color: '#ffaa00',
  }

请问有没有一种工作方式？

Answer 1

您可以使用style binding语法：

[style.background-color]="data.color"

有关演示，请参见this stackblitz。

Answer 2

您可以使用ngStyle

 <div class="icon-box" [ngStyle]="{'background-color': data?.color}">
        <i class="material-icons">{{ data.icon }}</i>
  </div>

Working example