angular – ngIf设置颜色?

前端之家收集整理的这篇文章主要介绍了angular – ngIf设置颜色?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个json:
[{
    "nodename": "Main application Server","enabled": true
},{
    "nodename": "Main Server","enabled": false
}]

并使用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>

现在,我将在我的面板 – 主要模板中设置不同的颜色:如果“启用”:true,则设置绿色,如果“启用”:false,则设置红色.这是怎么回事?用ngIf = …?或者是其他东西?

您可以利用ngStyle指令:
<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 }
    `
  ]
})

猜你在找的Angularjs相关文章