[ngclass]
動(dòng)態(tài)改變一個(gè)元素的class
ts:
public classcolor:boolean=false;
public list:any = [{title:"新聞1"},{title:"新聞2"},{title:"新聞3"}]
html:
<div>
<P>動(dòng)態(tài)改變一個(gè)元素的class</P>
<P [ngClass]="{'origin': classcolor,'red': !classcolor}">內(nèi)容</P>
</div>
<div>
<p>循環(huán)數(shù)組,數(shù)組第一個(gè)元素為red</p>
<ul>
<li *ngFor="let item of list; let key = index "
[ngClass]="{'red': key==1,'origin':key==0,'blue':key==2}">{{key}}--{{item.title}}</li>
<!-- 綁定動(dòng)態(tài)樣式的時(shí)候就轧,key的值不需要用引號(hào)''包裹起來,包裹起來就是一個(gè)字符串了田度,顯示的時(shí)候就是無狀態(tài) -->
</ul>
</div>
ts中
public arrt:any="blue";
public today:Date= new Date();
html中
<div>
<p>動(dòng)態(tài)綁定樣式[ngstyle]</p>
<ul>
<li [ngStyle]="{'color': arrt}">內(nèi)容</li>
</ul>
</div>
<div>
<ul>
<p>管道</p>
<li>{{today}}</li>
<!--通過管道妒御,指定格式-->
<li>{{today | date:'yyyy-MM-dd HH-mm-ss'}}</li>
</ul>
</div>