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";
}

如果有人知道，你能提出一些建议吗？

我改写了我的话，我想根据项目名称改变背景颜色，如下面的代码。我在组件中有如下属性。 item1，item2和item3指向模板中的{{item.name}}。可以根据项目名称对统计信息的css名称进行编码。但我确实希望用_css为这些属性添加后缀。所以，我把＆＃39; _css＆＃39;在末尾。此外，[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;
}

Plunker example

Answer 2

我不明白使用 _css 的目的，但您可以关注，

[style.backgroundColor]="property1"

OR

[style.background-color]="property1"

Answer 3

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

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

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

3 个答案: