Angular 条件判断

.ts

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-home',
 templateUrl: './home.component.html',
 styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
 
 public flag:boolean=false;

 public orderStatus:number=1;//1.已经支付 2.未支付 3.退款中 4.已经退款

 constructor() { }

 ngOnInit(): void {
 }

}

.html

<h1>条件判断句 *ngIf</h1>
<div *ngIf="flag">
   <img src="assets/images/f2.png">
</div>
<div *ngIf="!flag">
   <img src="assets/images/f3.png">
</div>

<h1>条件判断句 *ngSwitch</h1>
<div [ngSwitch]="orderStatus">
   <div *ngSwitchCase="1">已经支付</div>
   <div *ngSwitchCase="2">未支付</div>
   <div *ngSwitchDefault>其他</div>
</div>