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

时间:2017-02-16 20:28:56

标签: angular angular2-template

我有一个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行看到我的尝试。为什么这不起作用?

1 个答案:

答案 0 :(得分:2)

您需要在<button [style.background]="'#'+option.colorChips.primary.hex"></button> 符号前加上十六进制代码,即:

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

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

{{1}}