[ngclass]、[ngstyle]、管道

[ngclass]

　　动态改变一个元素的class

　　ts：　　　　

　　　　public classcolor:boolean=false;

　　　　public list:any = [{title:"新闻1"},{title:"新闻2"},{title:"新闻3"}]

　　html:

　　　　<div>

　　　　　　<P>动态改变一个元素的class</P>

　　　　　　<P [ngClass]="{'origin': classcolor,'red': !classcolor}">内容</P>

　　　　</div>

　　　　<div>

　　　　　　<p>循环数组,数组第一个元素为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>

　　　　　　　　<!-- 绑定动态样式的时候，key的值不需要用引号''包裹起来，包裹起来就是一个字符串了，显示的时候就是无状态 -->

　　　　　　</ul>

　　　　</div>

---

ts中

　　public arrt:any="blue";

　　public today:Date= new Date();

　　

html中

　　<div>

　　　　<p>动态绑定样式[ngstyle]</p>

　　　　<ul>

　　　　　　<li [ngStyle]="{'color': arrt}">内容</li>

　　　　</ul>

　　</div>

　　<div>

　　　　<ul>

　　　　　　<p>管道</p>

　　　　　　<li>{{today}}</li>

　　　　　　<!--通过管道，指定格式-->

　　　　　　<li>{{today | date:'yyyy-MM-dd HH-mm-ss'}}</li>

　　　　</ul>

　　</div>