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

巴特西