如何修复菜单中的* ngIf语句？

Question

我正在设置我的第一个角度应用程序，并且试图根据当前用户显示菜单选项

这是我的菜单代码的一部分：

<a *ngIf="areYouHeadMaster() == 'true'" class="navbar-item" routerLink="/announcement">
      announcement
      </a>

areYouHeadMaster方法：

  areYouHeadMaster(){
    console.log(this.transferData.getData());
      return this.transferData.getData();
  }

TransferData是仅具有一个变量并设置为get方法的服务。在控制台日志中，我得到的值为True，但是链接未添加到菜单中。

Answer 1

1. 请勿将true视为字符串（用引号引起来）。这是一个逻辑值，所以== true会做到
2. 您可以使用隐含逻辑：*ngIf="areYouHeadMaster()"，并跳过显式检查是否为真
3. 如果this.transferData.getData();是异步调用，请在ngOnInit中运行它，并将结果分配给作用域变量。在模板中使用变量，而不要使用函数调用*ngIf="isHeadmaster"。

Answer 2

如果getData()返回布尔值，则您的ngIf表达式错误，因为true == 'true'解析为false。尝试使用true，不要使用单引号：

<a *ngIf="areYouHeadMaster() == true" class="navbar-item" routerLink="/announcement">
      announcement
      </a>

或更短，省略比较：

<a *ngIf="areYouHeadMaster()" class="navbar-item" routerLink="/announcement">
      announcement
      </a>

Answer 3

尝试将此方法更改为如下所示：

areYouHeadMaster(){
  console.log(this.transferData.getData());
  return this.transferData.getData().toLowerCase();
}

角度字符串比较区分大小写。如前所述，“在控制台日志中，我得到的值为True”，这与“ true”不同。

Answer 4

与其将布尔值与字符串进行比较，不如尝试

<a *ngIf="areYouHeadMaster() == true" class="navbar-item" routerLink="/announcement">
  announcement
</a>