angular4 [ngStyle] [ngClass]的用法

<meta charset="utf-8">

1、ngStyle基本用法

<div [ngStyle]="{'background-color':'green'}"></<div>
判断添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>

2、ngClass
第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类,基本用法

[ngClass]="{'text-success':true}"
判断
[ngClass]="{'text-success':username == 'zxc'}"
[ngClass]="{'text-success':index == 0}"

3、例子
循环显示的第一行添加text-danger样式，文字变红色

const arr = [1, 3, 4, 5, 6]
<ul>
    <li *ngFor="let item of arr, let i = index">
        <span [ngClass]="{'text-danger': i==0}">{{item}}</span>
    </li>
</ul>

4.demo

 <!--会员卡信息-->
                            <div [class.none]="isConfirmOrder" *ngIf="memberInfo.id"
                                 class="list cla-for-succeed clearfix" [ngStyle]="{'height':discountMsg  ? '100px' : '55px' }">
                                <ng-container *ngIf="memberInfo.level">
                                    <span class="name">{{memberInfo.level.name}}</span>
                                    <span class="name pull-r">
                                        商品 {{memberInfo.level.discount}} 折,
                                        服务 {{memberInfo.level.discount_for_service}} 折,
                                        套餐 {{memberInfo.level.discount_for_combination}} 折
                                    </span>
                                </ng-container>
                                <span *ngIf="!memberInfo.level" class="name">暂无会员卡</span>
                                <div style="clear: both"></div>
                                <p class="tl-al-right" *ngIf="discountMsg">{{discountMsg}}</p>
                                <div style="clear: both"></div>
                                <p class="tl-al-right">本次收银共优惠：{{total_discount_price}}</p>
                            </div>