Question

我正在尝试根据本地存储中的用户角色来启用/禁用按钮。

我在本地存储中有一个像这样的键值：角色，值：“ HR Admin”

我的HTML看起来像这样

  <button class="nav-link-btn" [routerLink]="['/dashboard']"  > Dashboard </button>
  <button  class="nav-link-btn" [routerLink]="['/admin/templates-dashboard']"  > Templates </button>

我的TS文件如下所示，此函数在onInit上触发

  const userRole = localStorage.getItem('role');
  if(userRole === 'System Admin') {
    disabled() == false
  } else if (userRole === 'CAT Manager') {
    disabled() == false
  } else if (userRole === 'HR Admin') {
    disabled() == true
  } else {
    disabled() == false
  }

有什么想法应该怎么做？

Answer 1

使用[disabled]属性根据值启用或禁用按钮，

Ts文件：

const userRole = localStorage.getItem('role');

HTML文件：

<button class="nav-link-btn" [routerLink]="['/dashboard']" [disabled]="userRole === 'HR Admin'"> Dashboard </button>

Answer 2

尝试这个，希望它对您有用。

 <button class="nav-link-btn" [routerLink]="['/dashboard']" [disabled]="buttonDisabled"> Dashboard </button>
 <button  class="nav-link-btn" [routerLink]="['/admin/templates-dashboard']" [disabled]="buttonDisabled"> Templates </button>

   const userRole = localStorage.getItem('role');
  if(userRole === 'System Admin') {
    this.buttonDisabled = false;
  } else if (userRole === 'CAT Manager') {
    this.buttonDisabled = false;
  } else if (userRole === 'HR Admin') {
    this.buttonDisabled = true;
  } else {
    this.buttonDisabled = false;
  }

根据本地存储中的值禁用启动按钮

2 个答案: