(精华)2020年8月2日 Angular *ngFor,*ngIf,ngSwitch的使用

x33g5p2x  于2022-03-06 转载在 其他  
字(0.9k)|赞(0)|评价(0)|浏览(235)
<h1>--------------循环 ngFor---------------</h1>

<ul>
  <li *ngFor="let item of list;let key=index">{{key}} -- {{item}}</li>
</ul>

<ul>
  <li *ngFor="let item of list">{{key}} -- {{item}}</li>
</ul>

<h1>--------------条件判断 ngIf----------------</h1>

<div *ngIf="flag">
  <img src="assets/images/01.png" width="20">
</div>

<div *ngIf="!flag">
  <img src="assets/images/02.png" width="20">
</div>

<h1>---------------条件判断语句 *ngSwitch--------------</h1>

<div [ngSwitch]="orderStatus">
  <p *ngSwitchCase="1">
    表示已经支付
  </p>
  <p *ngSwitchCase="2">
    支付并且确认订单
  </p>
  <p *ngSwitchCase="3">
    表示已经发货
  </p>
  <p *ngSwitchDefault>
    无效订单
  </p>
</div>

相关文章