根据本地存储中的值禁用 prime-ng 按钮

Question

我正在尝试 enable/disable 基于本地存储中用户角色的按钮。

我在本地存储中有一个这样的值键：角色，值："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

Try this i hope its work for you.

 <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;
  }

Answer 2

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

TS 文件：

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

HTML 文件:

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

根据本地存储中的值禁用 prime-ng 按钮

Disable prime-ng button based on a value in Local Storage

primeng

angular