angular - 使用 angular 2 样式绑定(bind)绑定(bind) rgb 颜色值

Question

我想将来自后端的 rgb 值(如“200,55,100”)绑定(bind)到 div 的背景颜色。

那是行不通的，它会抛出模板解析异常。

<div [style.background-color]="rgb({{model.color}})"

我该如何正确地做到这一点？

更新

<div [style.background-color]="s.getColor()"> class="md-chip" *ngFor="let s of sums">
    <div class="md-chip-img">
        <span style="text-align:center" class="md-chip-span">X</span>
    </div>
    <span class="md-chip-text">{{s.subjectName}}</span>
</div>

Answer 1

您不能同时使用属性绑定(bind)([] 语法)和插值({{}} 语法)。这样做的原因是 Angular2 在幕后为插值创建了一个属性绑定(bind)(另请参见 Angular2 docs on interpolation)。

我建议尝试以下插值:

<div style.background-color="rgb({{model.color}})">...</div>

或者如果你想使用属性绑定(bind)，下面的方法应该有效:

<div [style.background-color]="'rgb(' + model.color + ')'">...</div>

其中 getColorString() 是一种返回 rgb 值的计算字符串的方法:

public getColorString(): string {
  return 'rgb(200, 55, 100)';
}