Question

我遇到一个问题，即未及时设置变量。在变量之前设置了标头，该标头指示要实例化显示哪些标头元素以及不显示哪些标头元素。这是我的代码

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

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

this.userRole存储在本地存储中，但未及时设置，因此该函数在返回true之前返回false

我从服务获取了userRole值

  ngOnInit() {
    this._userService.getCurrentUserProfileData()
      .subscribe((user) => {
        this.userRole = user;
      }
    );
  }

我的问题是如何在放置html之前确保已设置userRole，以便在实际角色值存在之前我不会得到未定义的内容

Answer 1

首先，您的if语句错误。您需要检查所有语句：

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

我已经在stackblitz上创建了一个小样本，看看：https://stackblitz.com/edit/angular-f8cvor 您可以更改服务提供的观测值的返回值，以查看结果更改。

Answer 2

听起来像您需要ngIf绑定到属性而不是方法，并且该属性应随userData的订户更改

Answer 3

似乎是异步操作的基本问题。基本上，您永远不要尝试将函数调用中的值绑定到视图。您应该始终使用变量来绑定值。

您可以拥有一个标志变量，而不是从视图中调用该函数，该标志变量最初设置为某个值，例如false。当您从getCurrentUserProfileData()函数获得响应时，可以再次设置该标志。

这可能有效。

corporatesDisabled = false;

ngOnInit() {
  this._userService.getCurrentUserProfileData()
    .subscribe((user) => {
      this.userRole = user;
      this.corporatesDisabled = this.isDisabledCorporates();
    }
  );
}

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

<button class="nav-link-btn" [routerLink]="['/corporate/dashboard']" *ngIf="corporatesDisabled"> Corporates </button>

由于未及时设置变量，因此未定义值

3 个答案: