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

【问题标题】：Angular hide and show buttons not working角度隐藏和显示按钮不起作用
【发布时间】：2019-10-08 12:32:50
【问题描述】：

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

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

     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。任何想法为什么？

【问题讨论】：

尝试在 DOM 中的某处打印 userRole。也许这是一个案例问题或不正确的值？
@RehbanKhatri 我安慰了它，它以“人力资源管理员”的身份出现
和下面提到的不一样。与旧代码有关的旧答案被标记为正确。评论前请仔细阅读。已标记。

标签： angular typescript

【解决方案1】：

你应该使用===，如果你的函数是否返回值，你为什么不先尝试一下。

isDisabledCorporates(): boolean {

返回真； // 或者尝试返回 false; }

如果这工作正常，那么继续尝试使用完整的代码，然后在执行 ngOnInit() 之后验证你在 this.userRole 中得到了什么。否则放置一个调试器，看看函数执行是如何发生的。

【讨论】：

【解决方案2】：

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

*ngIf="!isDisabledCorporates()"

*ngIf="!isDisabledArchive()"

【讨论】：

我很乐意提供帮助。