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

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

来源

2017-02-16 Moshe

它的工作原理如果你绑定到一个十六进制代码的字符串，例如'

@AngularFrance，工作！第2步：如何添加一个条件（如果'option.colorChips.primary.hex'未定义 - 使用默认值（如白色#FFFFFF）。再次感谢!! – Moshe

我已经发布解决方案作为答案。如果它符合法案，它就被接受。谢谢。 – AngularChef

您需要用#符号预先设置的十六进制代码，即：

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

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

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

来源

2017-02-16 21:37:23 AngularChef

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

回答

相关问题