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>