Angular 中 [ngClass]、[ngStyle] 的使用

1、ngStyle

基本用法

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

判断添加

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

使用函数判断

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

2、ngClass

第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类

基本用法

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

判断

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

函数

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

3、{{}}中使用函数

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