Angular2 - Как использовать строковые перечисления с * ngIf

Question

Как передать enum функции, когда я использую *ngIf в Angular?

У меня следующий код:

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

вы можете использовать другую переменную, что-то вроде AdminTest в вашем файле .ts, и установить для него значение в ngOnInit hook.

у вас должно быть что-то вроде:

.ts :

AdminTest = false;

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

checkRole() {
    // ...
}

.html :

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

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

Answer 3

Ошибка появляется, потому что вы передаете String, когда ожидается перечисление.Как и предполагали другие, есть несколько способов справиться с этим, и один из них:

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

Answer 4

Не следует использовать функцию с параметром в шаблоне, но делать что-то подобное:

Объявить переменную isAdmin в файле .ts и инициализировать ее при создании компонента, проверяяесли пользователь является администратором:

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

Используйте его в *ngIf:

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

Answer 5

Получите его как строку, затем преобразуйте в RoleType.

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

return ...
}