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>

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

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指令中使用或运算符，但这两个条件都不起作用。对于语言错误并感谢帮助

Answer 1

如果用户以用户或管理员身份登录时隐藏li元素，则应使用：

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

或

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

使用您当前的代码

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

只有当用户同时以两种访问方式登录时才隐藏元素，这可能是不可能的。

如何在* ngIf指令中使用or` ||来使用多个条件运算符Angular 4

1 个答案: