在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>
构建此文件时,它一直在抱怨。它无法将字符串转换为枚举,是否有办法解决?
答案 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
}
<div id="adminDiv" *ngIf="hasAccess(RoleType.Admin)">
</div>
答案 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);
}