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>

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

{{1}}

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

1 个答案: