So verwenden Sie mehrere Bedingungen in der * ngIf-Direktive mit oder '|| Operator Angular 4

Ich habe Navbar, die Elemente ändern müssen, wenn Benutzer oder Admin anmelden. Nach der Authentifizierung muss ich, dass einige Elemente geändert wurden. Dafür verwende ich ngIf-Anweisung. Das ist meine Navbar-Vorlage.So verwenden Sie mehrere Bedingungen in der * ngIf-Direktive mit oder '|| Operator Angular 4

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

Ich habe zwei Dienste für Benutzer und Administratoren pages.These Dienste haben Funktionen Handhabung, die im lokalen Speicher für Token Existenz überprüft. Diese sind Funktionen von Benutzerservice

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

Und dieser von Admin Service

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

Also brauche ich, dass, wenn der Benutzer oder Administrator die Protokollierung in einigen Elementen waren ausgeblendet (zu Hause, registrieren, einloggen)

für das habe ich versucht zu verwenden oder Operator in ngIf Richtlinie, aber beide Bedingungen nicht funktioniert.Sorry für Sprachfehler und Danke für Hilfe

Quelle

2017-12-29 Jor Khachatryan

Fügen Sie die beiden Dienste in Ihre Komponente ein? –

Ja, ich habe es getan, aber es funktioniert immer noch nicht –

Es sollte, wenn Sie alles richtig gemacht haben. Bitte, bieten https://stackoverflow.com/help/mcve – estus

Wenn die li Elemente ausgeblendet werden, wenn der Benutzer als Benutzer oder Administrator angemeldet, sollten Sie verwenden:

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

oder

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

Mit Ihrem aktuellen Code

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

die Elemente sind versteckt nur dann, wenn der Benutzer mit beiden Zugriffsarten gleichzeitig angemeldet ist, was wahrscheinlich nicht möglich ist.

Quelle

2017-12-29 01:32:37 ConnorsFan

Danke ConnorsFan, es funktioniert))) –

So verwenden Sie mehrere Bedingungen in der * ngIf-Direktive mit oder '|| Operator Angular 4

Antwort

Verwandte Themen