1、ngStyle基本用法
<div [ngStyle]="{'background-color':'green'}"></<div>
判斷添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>
2戴质、ngClass
第一個參數(shù)為類名稱踢匣,第二個參數(shù)為boolean值,如果為true就添加第一個參數(shù)的類,基本用法
[ngClass]="{'text-success':true}"
判斷
[ngClass]="{'text-success':username == 'zxc'}"
[ngClass]="{'text-success':index == 0}"
3离唬、例子
循環(huán)顯示的第一行添加text-danger樣式,文字變紅色
const arr = [1, 3, 4, 5, 6]
<ul>
<li *ngFor="let item of arr, let i = index">
<span [ngClass]="{'text-danger': i==0}">{{item}}</span>
</li>
</ul>