一、if判断

1-1.news.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  show = true;
  constructor() {}
  ngOnInit(): void {
  }
}

1-2.news.component.html

<div class="show" *ngIf="show"></div>

1-3.news.component.css

.show{
    width: 100px;
    height: 100px;
    background-color: red;
}

二、Switch判断

2-1.news.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  number = 3;
  constructor() {}
  ngOnInit(): void {
  }
}

2-2.news.component.html

<div [ngSwitch]="number">
    <div *ngSwitchCase="1">未支付</div>
    <div *ngSwitchCase="2">已支付</div>
    <div *ngSwitchDefault>完成交易</div>
</div>