web-dev-qa-db-fra.com

* ngSi cela ne fonctionne pas comme prévu avec observable

J'ai donc ces 2 boutons:

<a class="router-link nav-item" routerLink="/login" *ngIf="!isLoggedIn$ | async">
  Login
</a>
<a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn$ | async">
  Logout
</a>

Et le bouton de déconnexion fonctionne parfaitement, dès que l'utilisateur est connecté, le bouton apparaît. Mais le bouton de connexion n'apparaît jamais.

C'est le code derrière le isLoggedIn$:

isLoggedIn$: Observable<boolean>;

ngOnInit() {
  this.isLoggedIn$ = this.authService.isLoggedIn;
}

AuthService:

private loggedIn = new BehaviorSubject<boolean>(false);

get isLoggedIn() {
  return this.loggedIn.asObservable();
}

J'espère que c'est assez d'informations et que le problème est clair, merci d'avance!

angularangular-ng-if
9
SjaakvBrabant

Mettez le tuyau asynchrone entre parenthèses.

<a class="router-link nav-item" routerLink="/login" *ngIf="!(isLoggedIn$ | async)">
  Login
</a>
<a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn$ | async">
  Logout
</a>

Vous pouvez également envisager de refactoriser l'extrait ci-dessus avec le mot clé as introduit dans Angular 4:

<ng-container *ngIf="isLoggedIn$ | async as isLoggedIn">
   <a class="router-link nav-item" routerLink="/login" *ngIf="!isLoggedIn">
    Login
  </a>
  <a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn">
    Logout
  </a>
</ng-container>

Plus d'informations sur la syntaxe as dans le documents officiels .

23
Tomasz Kula

Vous pouvez également refactoriser pour utiliser la partie else de la directive ngIf:

<a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn$ | async; else loginBlock">
    Logout
</a>
<ng-template #loginBlock>
    <a class="router-link nav-item" routerLink="/login">
        Login
    </a>
</ng-template>

Vous pouvez voir plus d'exemples dans la documentation .

4
Adrian Fâciu