如何将十六进制颜色绑定到背景角度？

Question

我有一个存储十六进制颜色值的 JSON 文件option.colorChips.primary.hex，我想为每种颜色创建一个按钮，其中按钮的背景就是相关的颜色。（注：option.colorChips.primary.hex仅包含6位十六进制代码，不包含#）

这是我的模板：

<ng-container *ngFor="let color of style.colors">
  <h1>{{ color.category }}</h1>
  <ng-container *ngFor="let option of color.options">
    <button [style.background]="option.colorChips.primary.hex">{{ option.name }} Color </button><br />
    {{ option.colorChips.primary.hex }} <br />
    </ng-container>
    <hr />
</ng-container>

你可以在第 4 行看到我的尝试。为什么这不起作用？

Answer 1

您需要在十六进制代码前添加符号#，即：

<button [style.background]="'#'+option.colorChips.primary.hex"></button>

如果你想提供默认颜色，可以使用三元运算符：

<button [style.background]="option.colorChips.primary.hex ? '#'+option.colorChips.primary.hex : '#FFFFFF'"></button>