TypeScript枚举使用方法及类中模板访问失败问题解决

这是个非常典型的误区，我来帮你拆解原因和解决办法：

为什么模板里访问不了？ #

你类里的substitutionsType是枚举类型的具体值（比如0、1、2这类数字），而不是枚举对象本身。打个比方：substitutionsType就像枚举里的一个“选项值”，而你想让这个选项值去调用整个枚举的成员，这当然行不通——就像你拿一个数字2，没法用2.REPLACEMENT_FREE去访问枚举定义一样。

解决办法 #

根据你的需求，分两种场景处理：

场景1：需要在模板中直接使用枚举成员（比如判断、显示枚举名称） #

你需要把枚举对象本身暴露给模板。在类里添加一行代码，把枚举挂载到实例上：

export enum SubstitutionType { 
  REPLACEMENT_TEACHER_SUBJECT = 0, 
  REPLACEMENT_TEACHER = 1, 
  REPLACEMENT_FREE = 2 
}

class A { 
  public substitutionsType: SubstitutionType;
  // 关键：把枚举对象绑定到类实例，让模板能访问到它
  public SubstitutionType = SubstitutionType;
}

之后在模板里就能这样用了（以Angular/Vue这类框架为例）：

<!-- 判断当前属性值是否等于REPLACEMENT_FREE -->
<div *ngIf="substitutionsType === SubstitutionType.REPLACEMENT_FREE">
  这是无课替换类型
</div>

<!-- 把数值类型的枚举值转成对应的名称字符串 -->
<div>当前类型：{{ SubstitutionType[substitutionsType] }}</div>

场景2：只是想判断属性值对应的枚举类型 #

如果不需要在模板里直接写枚举成员名称，也可以在类里提前处理逻辑，比如给类加一个方法：

class A { 
  public substitutionsType: SubstitutionType;

  isFreeSubstitution(): boolean {
    return this.substitutionsType === SubstitutionType.REPLACEMENT_FREE;
  }
}

模板里直接调用方法：

<div *ngIf="isFreeSubstitution()">无课替换</div>

补充说明 #

TypeScript的数字枚举默认会生成反向映射（即从值到名称的映射），所以SubstitutionType[2]会返回"REPLACEMENT_FREE"，但如果是字符串枚举就没有这个特性，这点需要注意。

内容的提问来源于stack exchange，提问作者dooglu