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

时间:2019-01-28 11:58:20

标签: angular typescript enums angular7

在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>

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

6 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:4)

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

中执行以下操作
allRoleTypes = RoleType;

和您的html

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

您不需要编写任何方法。

答案 2 :(得分:2)

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

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

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

*ngIf中使用它:

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

答案 3 :(得分:1)

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

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

return ...
}

答案 4 :(得分:1)

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

您应该有类似的东西:

.ts

AdminTest = false;

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

checkRole() {
    // ...
}

.html

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

答案 5 :(得分:0)

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

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