Question

我有一个这样的按钮列表

<div style="position: absolute; top:0; right: 0;">
 <button class="nav-link-btn" [routerLink]="['/dashboard']"> Dashboard </button>
 <button class="nav-link-btn" [routerLink]="['/admin/templates-dashboard']"  > Templates </button>
 <button class="nav-link-btn" [routerLink]="['/admin/roles-dashboard']" > Users </button>
 <button class="nav-link-btn" [routerLink]="['/corporate/dashboard']"> Corporates </button>
 <button class="nav-link-btn" [routerLink]="['/archive']"> Archive </button>
 <button id="name-btn" class="nav-link-btn" [routerLink]="['/my-profile']"  >
        <span id="circle"></span> {{ name }}
 </button>
 <button  id="logout-btn" (click)="isDialogOpen = true" class="main">Log out</button>
</div>

然后我具有一个存储在本地存储中的用户角色。我现在尝试根据用户角色禁用/启用上述按钮。

例如，如果userRole是系统管理员，则禁用“存档”按钮，但是如果userRole是HR管理员，则启用“存档”按钮

我正在尝试以下操作，但它似乎没有按预期运行

isDisabled(userRole: string): boolean {
    if (userRole == 'System Admin') {
      return true;
    } else {
      return false;
    }
 }

[disabled]="isDisabled(userRole)"

Answer 1

您仍应使用输入绑定并将所有按钮的disabled属性绑定到isDisabled()方法。除非您将其设置为属性，否则您将无法访问模板（component.html）上的userRole。

<button [disabled]="isDisabled()" class="nav-link-btn" [routerLink]="['/archive']"> Archive </button>

在您的component.ts上，您可以在userRole方法内获得isDisabled()。我假设密钥也称为userRole。

isDisabled(): boolean {
    var userRole = storage.getItem(`userRole`);
    if (userRole == 'System Admin') {
      return true;
    } else {
      return false;
    }
 }

根据值启用或禁用按钮

1 个答案: