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