Question

我有以下要求不适用于当前代码。我需要根据用户角色隐藏或显示位于应用程序标题组件中的按钮。

用户角色来自会话存储，该会话存储在服务文件中被调用。

     setStoreData() {
        const data = JSON.parse(sessionStorage.getItem(`oidc.user:${environment.accessTokenApiUrl}:${environment.clientId}`));
        return data;
      }

然后我在ngOnit的标头组件中使用该服务，并将其分配给变量

      ngOnInit() {
            this.userRole = this._storeService.setStoreData().profile.role;
      }

然后是启用或禁用标题按钮的功能

      isDisabledCorporates(): boolean {
        if (
          this.userRole == 'HR Admin' ||
          this.userRole == 'HR Recruiter' ||
          this.userRole == 'HR Manager' ||
          this.userRole == 'Candidate' ||
          this.userRole == 'Operations administrator' ||
          this.userRole == 'Internal Account Manager') {
          return true;
        } else {
          return false;
        }
      }

      isDisabledArchive(): boolean {
        if (  this.userRole == 'HR Recruiter' ||
              this.userRole == 'HR Manager' ||
              this.userRole == 'Candidate' ||
              this.userRole == 'Operations administrator' ||
              this.userRole == 'Internal Account Manager') {
          return true;
        } else {
          return false;
        }
      }

最后我有如下的html代码

    <nav *ngIf="userRole">
      <div>
        <div>
          <button class="nav-link-btn" [routerLink]="['/corporate/dashboard']" *ngIf="isDisabledCorporates()"> Corporates </button>
          <button class="nav-link-btn" [routerLink]="['/archive']" *ngIf="isDisabledArchive()"> Archive </button>
        </div>
      </div>
    </nav>

问题是该代码似乎并未禁用公司按钮，而我的当前用户是HR Admin。有什么想法吗？

Answer 1

这似乎是反逻辑。如果方法返回true，则* ngIf结构化指令将在DOM中显示元素。我建议添加一个！运算符。

byteswap

*ngIf="!isDisabledCorporates()"

Answer 2

您应该使用===，如果函数没有返回值，为什么不先尝试。

isDisabledCorporates(): boolean {

返回true； //或尝试使用return false; }

如果这可以正常工作，那么请尝试使用完整的代码，并在执行ngOnInit（）之后验证所有内容是否进入this.userRole中。否则放一个调试器，看看函数是如何发生的。

角度隐藏和显示按钮不起作用

2 个答案: