如何在angular的ngSwitch中使用typescript枚举并举例说明

Typescript提供了分组常量，并提到了枚举类型：

export enum Day {

  MONDAY,
  TUESDAY,
  WEDNESDAY,
  THURSDAY,
  FRIDAY,
  SATURDAY,
  SUNDAY,
}

枚举常量只存在于编译时，所以javascript没有枚举类型的概念。

有时，我们想在HTML模板中用angular ngSwitch来映射枚举常量。

ngSwitch是用来从Angular模板中的多个ngSwitchCase中选择一个元素。

它类似于编程语言（如typescript或javascript）中的switch case表达。

如何在Angular ngSwitch和ngSwitchCase中使用typescript枚举并举例说明

以下是一步一步的步骤。

• 让我们在day.ts中声明enum

export enum Day {
    MONDAY,
    TUESDAY,
    WEDNESDAY,
    THURSDAY,
    FRIDAY,
    SATURDAY,
    SUNDAY
}

在Angular typescript组件中，由于enum类在HTML模板中没有直接使用，所以你必须声明以下内容

• 声明一个在ngSwitch表达式中使用的变量
• 声明一个typeof枚举常量并在ngSwtichCase中使用它。

这里有一个angular typescript组件

import { Component } from '@angular/core';
import { Day } from './day';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  day: typeof Day;

  constructor() {
    this.day = Day;
  }

  sunday = Day.SUNDAY;




}

在模板组件中，声明ngSwitch,ngSwitchCase, 和ngSwitchDefault 并在表达式和case语句中使用这些变量。

<div class="info-card" [ngSwitch]="sunday">
    <div *ngSwitchCase="this.day.SUNDAY">Today is sunday</div>
    <div *ngSwitchCase="this.day.MONDAY">Today is monday</div>
    <div *ngSwitchCase="this.day.TUESDAY">Today is tuesday</div>
    <div *ngSwitchCase="this.day.WEDNESDAY">Today is wednesday</div>
    <div *ngSwitchCase="this.day.THURSDAY">Today is thursday</div>
    <div *ngSwitchCase="this.day.FRIDAY">Today is friday</div>
    <div *ngSwitchCase="this.day.SATURDAY">Today is saturday</div>
    <div *ngSwitchDefault>Default case</div>
</div>

总结

总结一下，在typescript中声明枚举常量，并使用枚举与angular ngSwitch case进行映射，并举例说明。