带有枚举的 Angular 接口答案

【问题标题】：Angular Interface with Enum带有枚举的 Angular 接口
【发布时间】：2020-11-15 12:28:13
【问题描述】：

是否可以在角度与 enum 建立接口？

我有一个这样的界面：

export interface UserModel {
   title: TitleEnum
}

一个枚举：

export enum TitleEnum {
    Admin = 0,
    Alfa = 1,
    Beta = 2
}

所以我正在尝试获取 {{user.title}}，不断收到号码，我错过了什么吗？

【问题讨论】：

不幸的是，这就是 enum 的工作方式，看看这里mariusschulz.com/blog/string-enums-in-typescript all the best

标签： javascript angular typescript enums interface

【解决方案1】：

这就是枚举的工作原理！如果您正在寻找将键分配给字符串，那么您可以使用字符串枚举。

export enum TitleEnum {
    Admin = 'Admin',
    Alfa = 'Alfa',
    Beta = 'Beta'
}

【讨论】：

【解决方案2】：

你也可以使用属性

//in your component html
<select>
        <option *ngFor="let key of keys" [value]="key" [label]="race[key]"></option>
</select>


export enum RaceCodeEnum {
    Asian = 1,
    Mexican = 2,
    AfricanAmerican = 3,
    White = 4,

}

export class RaceSelect {

  race= RaceCodeEnum;

  constructor() {
    this.keys = Object.keys(this.race).filter(k => !isNaN(Number(k)));
  }
}

【讨论】：