ng 循环数据

1. 显示数据的索引值

　　　　在ts中

　　　　　　public list:any[]=[

　　　　　　　　{title:"新闻1",},{title:"新闻2"},{title:"新闻3"}

　　　　　　]

 

　　　　在html中

　　　　　　<div>

　　　　　　　　<p>未显示索引</p>

　　　　　　　　<p *ngFor="let item of list">{{item.title}}</p>

　　　　　　　　<p>显示索引</p>

　　　　　　　　<p *ngFor="let item of list;let key=index">{{key}}--{{item.title}}</p>

　　　　　　</div>

---

　　2.ngIf条件判断　　

eg1:　在ts中　public flag:boolean=false;

　　　在HTML中

　　　　　　<div>

　　　　　　　　<p>ngIf条件判断</p>

　　　　　　　　<div *ngIf="flag">

　　　　　　　　　　<p><img src="assets/images/01.png" alt=""></p>

　　　　　　　　</div>

　　　　　　　　<div *ngIf="!flag">

　　　　　　　　　　<p><img src="assets/images/02.png" alt=""></p>

　　　　　　　　</div>

　　　　　　</div>

eg2:

　　　　在ts中

　　　　　　public list:any[]=[

　　　　　　　　{title:"新闻1",},{title:"新闻2"},{title:"新闻3"}

　　　　　　]

 

　　　　在html中

　　　　　　<div>

　　　　　　　　<p>未显示索引</p>

　　　　　　　　<p *ngFor="let item of list">{{item.title}}</p>

　　　　　　　　<p>显示索引</p>

　　　　　　　　<p *ngFor="let item of list;let key=index">

　　　　　　　　　　<span *ngIf=“key==1” class="red">{{key}}--{{item.title}}</.span>

　　　　　　　　　　<span *ngIf=“key==!1”>{{key}}--{{item.title}}</.span>　

　　　　　　　　</p>

　　　　　　</div>

 

---

  ngSwitch

　eg：在ts中　

　　　　public orderStatus:number = 1;

　　　　//1-已支付 2-支付确认 3-已发货 4-收货 5-无效

　　　在HTML中

　　　　<div [ngSwitch]="orderStatus">

　　　　　　<p *ngSwitchCase="1">

　　　　　　　　　已支付

　　　　　　</p>

　　　　　　<p *ngSwitchCase="2">

　　　　　　　　支付确认

　　　　　　</p>

　　　　　　<p *ngSwitchCase="3">

　　　　　　　　已发货

　　　　　　</p>

　　　　　　<p *ngSwitchCase="4">

　　　　　　　　收货

　　　　　　</p>

　　　　　　<p *ngSwitchDefault>

　　　　　　　　无效

　　　　　　</p>

　　　　</div>

---