(精华2020年6月4日更新)Angular基础篇 *ngFor,*ngIf,ngSwitch的使用

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

猜你喜欢

转载自blog.csdn.net/weixin_41181778/article/details/106560938