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> |