Angular hide and show buttons not working

Question

I have the following requirement that is not working with my current code. I need to hide or show buttons which sit in my app header component based on a users role.

The users role comes from session storage which is being called in a service file.

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

I then consume the service in my header component on ngOnit and assign it to a variable

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

Then comes the function to enable or disable my header button

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

Lastly I have the html code as follows

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

The problem is that the code does not seem to disable the corporate button and my current user is HR Admin. Any ideas why?

Answer 1

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

*ngIf="!isDisabledCorporates()"

*ngIf="!isDisabledArchive()"