Angular6中[ngClass]、[ngStyle]的基本使用

一、ngStyle

基本用法

<div [ngStyle]="{'background-color':'green'}"></<div>

判斷添加

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

使用函數判斷

<div [ngStyle]="{'background': setNameLineClass(data.status)}"></<div>

二、ngClass 

第一個參數爲類名稱，第二個參數爲boolean值，若是爲true就添加第一個參數的類

基本用法

[ngClass]="{'text-success':true}"

判斷

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

函數

 <tr [ngClass]="chooseTrClass(data)">

三、{{}}中使用函數

<td><i nz-icon [iconfont]="setStatusIcon(data.status)" class="table-name-icon-line"></i> {{statusToCh(data.status)}}</td>