Angular2 - 如何在 *ngIf 中使用字符串枚举

Question

当我在Angular中使用*ngIf时，如何将enum传递给函数？

我有以下的代码：

export enum RoleType {
    User='User',
    Admin='Admin'
}

组件功能

public hasAccess(role: RoleType) {
   //check role type and return true or false
}

组件 HTML

<div id="adminDiv" *ngIf="hasAccess('Admin')">
</div>

当我构建这个时，它一直在抱怨。 它无法将字符串转换为枚举，有没有办法解决这个问题？

当我构建此内容时，它一直报错。 它无法将字符串转换为枚举类型，是否有解决方法？

- Danny

---

hasAccess(RoleType.Admin)的意思是“具有管理员角色的访问权限”，如果您想在模板中使用这个枚举，需要将其分配给某个公共属性，例如RoleType = RoleType。 - Buczkowski

为什么要在模板中硬编码参数？只需创建一个检查用户是否为管理员的函数即可。 - R. Richards

@Buczkowski 或许你能用一个例子来回答这个问题，因为那是相当不错的选择。 - Silvermind

@Silvermind veben 刚刚做了。 - Hypenate

可能是一个重复的问题，参考如何在Angular2组件和服务中访问常量？。 - Jules Pollender

Answer 1

这里有一种更为简洁的做法。请在您的组件.ts中按照以下步骤操作。

allRoleTypes = RoleType;

并且在您的HTML中

*ngIf="role===allRoleTypes.User"

您不需要编写任何方法。

- Dejazmach

---

确实更加干净。 - MDMoore313

更简洁但仍然可怕（在每个使用它的地方都需要将枚举复制为局部变量... 噢！） - jeancallisti

@jeancallisti 这不是重复，重复是指你需要多次编写枚举。在这里，你只是在使用它。还有其他选项吗？我们在倾听。 - Dejazmach

@Dejazmach “噢，呸”并不是针对你说的，而是针对Angular说的。如果没有更好的方式，那就没有更好的方式，但我有权嘲笑Angular那些复杂的陷阱。 - jeancallisti

@jeancallisti 啊，说得好。实际上，有一些方法可以使用Subjects来做到这一点，但我认为这超出了这个问题的范围。也许正确回答这个问题的方式是“不，这不是你应该实现安全性的方式，首先要学习和理解Subjects和Observables（RXJS）”。顺便说一句，我认为Angular是最好的。 - Dejazmach

Answer 2

正如@Buczkowski建议的那样，您可以这样做：

export enum RoleType {
    User = 'User',
    Admin = 'Admin'
}

组件

RoleType = RoleType; // This way you can access its properties from the template.

public hasAccess(role: RoleType) {
    //check role type and return true or false
}

组件HTML

<div id="adminDiv" *ngIf="hasAccess(RoleType.Admin)">
</div>

StackBlitz示例

- Silvermind

Answer 3

先将其作为字符串获取，然后将其转换为RoleType类型。

public hasAccess(role: string): boolean {
const roleAsEnum: RoleType = RoleType[role];

return ...
}

- Hypenate

---

谢谢您提供的解决方案。但是这样做不会使枚举变得多余吗？ - Danny

我想是的 :) 我更倾向于 R. Richards 的想法。 - Hypenate

Answer 4

你不应该在模板中使用带有参数的函数，而是可以像这样操作：

在你的 .ts 文件中声明一个名为 isAdmin 的变量，并在组件创建时进行初始化，检查用户是否为管理员：

```typescript isAdmin: boolean;

ngOnInit() { this.isAdmin = this.userService.checkIfUserIsAdmin(); } ```

然后在模板中使用 isAdmin 变量来控制显示逻辑。原始答案可翻译为“最初的回答”。

isAdmin = false;
ngOnInit() {
    this.isAdmin = this.checkIfUserAdmin(...)
}

Use it in the *ngIf:

<div id="adminDiv" *ngIf="isAdmin">
</div>

- veben

Answer 5

你可以在.ts文件中使用另一个变量，比如叫做AdminTest，并在ngOnInit钩子中给它赋值。

你的代码应该像这样:

.ts:

AdminTest = false;

ngOnInit() {
    this.AdminTest = this.checkRole()
}

checkRole() {
    // ...
}

.html:

<div id="adminDiv" *ngIf="AdminTest"></div>

- Ganz

---

您添加了一个类似于 @veben 的答案。 - aBnormaLz

是的，我猜我们都是正确的。我之前没有看到他的答案。 - Ganz

Answer 6

错误出现的原因是你在需要枚举类型时传递了字符串。正如其他人所建议的那样，有多种处理方法，其中之一是：

  private hasRole(role: string) {
    console.log(role == RoleType.admin);
    console.log(role == RoleType.user);
  }

- Shadab Faiz