我正在尝试根据本地存储中的用户角色启用/禁用按钮。
我在本地存储中有一个值,如下所示:Key:Role,Value:“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
}
有什么想法应该怎么做?
试试这个我希望它为你工作。
<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;
}
使用[disabled]
属性根据值启用或禁用按钮,
Ts文件:
const userRole = localStorage.getItem('role');
HTML文件:
<button class="nav-link-btn" [routerLink]="['/dashboard']" [disabled]="userRole === 'HR Admin'"> Dashboard </button>