在 TypeScript / Angular2 中将 Int 数组转换为枚举答案

【问题标题】：Converting Array of Int to Enum in TypeScript / Angular2在 TypeScript / Angular2 中将 Int 数组转换为枚举
【发布时间】：2018-01-20 12:20:53
【问题描述】：

在正在构建的应用程序中，我们创建了一个名为 UserRolesEnum 的枚举，就像这样

public enum UserRoleEnum {
    Aministration = 1,
    Manager = 2,
    Employee = 3
}

当这个信息被发送到数据库时，int被存储。

在系统中显示用户的页面上，组件中TypeScript返回的是一个数组int数组（如[1,2,3]）。

使用 TypeScript 和 Angular2 的组合，以下用于显示用户的角色：

<div class="role" *ngFor="let role of userRoles">
    <span>{{role}}</span>
</div>

我要显示的是数组 [Administration, Manager, Employee]。

我尝试了几种不同的方法，但到目前为止都没有奏效。有没有简单的转换可以让我继续使用数组功能？

【问题讨论】：

嗨！欢迎来到堆栈溢出。您能告诉我们您使用minimal reproducible example 尝试过什么吗？它可能足够接近，可以进行小的修改。
谢谢。我不能太多，因为它是一个更大的项目的一部分，它与很多事情有关。这些是我知道我可以肯定展示的作品。
在 ngFor 迭代中使用查找表怎么样？所以不要使用<span>{{role}}</span>，而是使用<span>{{yourLookupTable[role]}}</span> ?

【解决方案1】：

使用for循环的索引

<div class="role" *ngFor="let role of userRoles; let i = index">
    <span>{{i}}</span>
</div>

【讨论】：

【解决方案2】：

我认为您需要将该数字作为索引传递到枚举中。你可以试试这个吗？

<span>{{UserRoleEnum[role]}}</span>

您可能还需要在组件代码中添加枚举。

public UserRoleEnum = UserRoleEnum;

或;

UserRoleEnum : typeof UserRoleEnum = UserRoleEnum;

【讨论】：