angular - 如何在带有 or` || 的 *ngIf 指令中使用多个条件运算符 Angular 4

Question

我有导航栏，当用户或管理员登录时，它必须更改元素。身份验证后，我需要更改一些元素。为此，我使用 ngIf 指令。这是我的导航栏模板。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">MEAN</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor02">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active" *ngIf="!auth.loggedIn() || !admin.loggedIn()">
        <a class="nav-link" routerLink = "/">Home</a>
      </li>
      <li class="nav-item" *ngIf="!auth.loggedIn() || !admin.loggedIn()">
        <a class="nav-link" routerLink = "/login">Login</a>
      </li>
      <li class="nav-item" *ngIf="!auth.loggedIn() || !admin.loggedIn()">
        <a class="nav-link" routerLink = "/register" >Register</a>
      </li>
      <li class="nav-item" *ngIf="auth.loggedIn()">
        <a class="nav-link" routerLink = "/dashboard">Dashboard</a>
      </li>
      <li class="nav-item" *ngIf="auth.loggedIn()">
        <a class="nav-link" routerLink = "/edit">Edit User</a>
      </li>
      <li class="nav-item" *ngIf="auth.loggedIn()">
        <a class="nav-link" (click)="logout()">Logout</a>
      </li>
      <li class="nav-item" *ngIf="admin.loggedIn()">
        <a class="nav-link" routerLink = "/adminPage">Edit Users</a>
      </li>
      <li class="nav-item" *ngIf="admin.loggedIn()">
        <a class="nav-link" (click)="logout()">Logout</a>
      </li>
    </ul>
  </div>
</nav>

我有两个用于处理用户和管理员页面的服务。这些服务具有检查本地存储中是否存在 token 的功能。 这是用户服务的功能

loggedIn(){
    if(localStorage.getItem("authToken")){
      return true;
    }else{
      return false;
    }
  }

还有这个来自管理服务

loggedIn(){
  if(localStorage.getItem("adminToken")){
    return true;
  }else{
    return false;
  }
}

所以我需要当用户或管理员登录时隐藏某些元素(主页、注册、登录)

<li class="nav-item active" *ngIf="!auth.loggedIn() || !admin.loggedIn()">
            <a class="nav-link" routerLink = "/">Home</a>
          </li>
          <li class="nav-item" *ngIf="!auth.loggedIn() || !admin.loggedIn()">
            <a class="nav-link" routerLink = "/login">Login</a>
          </li>
          <li class="nav-item" *ngIf="!auth.loggedIn() || !admin.loggedIn()">
            <a class="nav-link" routerLink = "/register" >Register</a>
          </li>

为此，我尝试在 ngIf 指令中使用 or 运算符，但两种情况均无效。对于语言错误，我们深表歉意，感谢您的帮助

Answer 1

如果要在用户以用户或管理员身份登录时隐藏 li 元素，您应该使用:

*ngIf="!auth.loggedIn() && !admin.loggedIn()"

或

*ngIf="!(auth.loggedIn() || admin.loggedIn())"

---

使用您当前的代码

*ngIf="!auth.loggedIn() || !admin.loggedIn()"

仅当用户同时使用两种访问权限登录时才会隐藏这些元素，这很可能是不可能的。