Question

我想绑定一个rgb值，如＆＃34; 200,55,100＆＃34;从后端到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

您不能同时使用属性绑定（[]语法）和插值（{{}}语法）。原因是Angular2在插值的幕后创建了一个属性绑定（另请参阅Angular2 docs on interpolation）。

我建议使用插值来尝试以下内容：

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

或者如果您想使用属性绑定，以下内容应该有效：

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

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

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

Answer 2

我也有类似的情况，需要像属性指令一样绑定客户端颜色转换。

就我而言，我曾经需要此功能，在使用Angular之前，我依靠jQuery将在关键字中设置的颜色转换为RGB，以便在背景上自动形成对比。如果需要进行颜色转换，请在npm上检查 color-convert 。

如果您在react-native-firebase和colorBackground()中调整颜色转换，您应该可以做到这一点。

If you want to see how its used and works, you can check out this stackblitz I was sketching in.

colorText()

使用角度2样式绑定绑定rgb颜色值

2 个答案: