ng如果要设置颜色? [英] ngIf to set a color?

问题描述

我有这个json:

[{
    "nodename": "Main application Server",
    "enabled": true
},
 {
    "nodename": "Main Server",
    "enabled": false
}]

然后我使用ngFor在模板中显示此数据:

and i show this data in my template with ngFor:

<div class="row" *ngFor="let list of lists">
        <div class="col-md-12 col-xs-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h2 class="panel-title text-center">Server: {{ list.nodename }}, {{ list.enabled }}</h2>
                </div>
            </div>   
         </div>
<div>  

现在，我将在模板中的panel-primary上设置不同的颜色:如果"enabled": true，则设置为绿色，如果"enabled": false，则设置为红色.怎么办和ngIf=...吗?还是其他?

And now, i would set to different color on my panel-primary in template: if "enabled": true, than set a green color, and if "enabled": false, set a red color. How do this? with ngIf=...? Or something else?

推荐答案

您可以利用ngStyle指令:

You could leverage the ngStyle directive:

<div class="panel panel-primary"
    [ngStyle]="{'background-color': list.enabled? 'green' : 'red'}">

或ngClass:

<div class="panel panel-primary"
    [ngClass]="{greenClass: list.enabled, redClass: !list.enabled}">

组件中具有以下样式:

@Component({
  (...)
  styles: [
    `
      .greenClass { background-color: green }
      .redClass { background-color: red }
    `
  ]
})

这篇关于ng如果要设置颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！