(精华)2020年8月2日 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>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107752597