Question

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

我有以下代码：

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>

构建此文件时，它一直在抱怨。它无法将字符串转换为枚举，是否有办法解决？

Answer 1

按照@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 example

Answer 2

这是一种更清洁的方法。在您的component.ts

中执行以下操作

allRoleTypes = RoleType;

和您的html

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

您不需要编写任何方法。

Answer 3

您不应在模板中使用带有参数的功能，而应执行以下操作：

在isAdmin文件中声明一个变量.ts，并在创建组件时对其进行初始化，检查用户是否为admin：

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

在*ngIf中使用它：

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

Answer 4

将其获取为字符串，然后将其转换为RoleType。

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

return ...
}

Answer 5

您可以在.ts文件中使用另一个变量，例如 AdminTest ，并在ngOnInit钩子处为其设置一个值。

您应该有类似的东西：

.ts ：

AdminTest = false;

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

checkRole() {
    // ...
}

.html ：

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

Answer 6

出现错误是因为在需要枚举时您正在传递String。正如其他人所建议的那样，有多种处理方法，其中一种是：

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

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

6 个答案:

组件

组件html