如何使用属性动态设置样式

Question

我正在使用Angular2，我想使用组件中的属性名称动态设置样式。以下是我尝试过的，但它不起作用。

<span class = "label" [style.background-color]="property1+'_css'">{{property1}} </span>
<span class = "label" [style.background-color]="property2+'_css'">{{property2}} </span>
export class ABC implements OnInit, OnChanges {
    property1 : string = "#f89406";
    property2 : string = "#3a87ad";
}

如果有人知道这件事，你能给出一些建议吗？

---

我

重复了我的话，我想根据项目名称更改背景颜色，如下面的代码。我在组件中有如下所示的属性。项目1、项目2 和项目3 指向模板中的 {{item.name}}。可以根据项目名称对 css 名称进行统计编码。但我确实想为这些属性添加后缀_css。所以，我把"_css"放在最后。此外，[style.background-color] 的右边不是直接在组件中定义的属性，它是在模板的 ngFor 中定义的变量。

<tr *ngFor="let item of items">
       <b><span class = "label" [style.background-color]="item.name+'_css'">{{item.name}}</span></b>
</tr>
export class ABC implements OnInit, OnChanges {
    item1_css : string = "#f89406";
    item2_css : string = "#3a87ad";
    item3_css : string = "#2283c5";
}

Answer 1

[style.background-color]="self[item.name +'_css']"

get self() {
  return this;
}

普伦克示例

Answer 2

我不明白使用_css的目的，但你可以执行以下操作，

[style.backgroundColor]="property1"

或

[style.background-color]="property1"

Answer 3

考虑到您正在尝试向元素添加css class否则@micronyks将提供确切的代码。

[ngClass]="{'my-class_css': isClassVisible }"