Zastosowanie zauważalne w Szablon

Question

Próbuję użyć obserwowalne w moim szablonu przez:

<md-nav-list> 
    <a md-list-item *ngIf="!isAuth() | async" [routerLink]="['login']" (click)="sidenav.toggle()">Login</a> 
    <a md-list-item *ngIf="isAuth() | async" (click)="logout()" (click)="sidenav.toggle()">Logout</a> 
</md-nav-list> 

iw moim module:

isAuth(): Observable<boolean> { 
     return this.loginservice.getAuthenticated() 
        .map(user => { if(user){ 
            if(user.hasOwnProperty('uid')){ 
             return true; 
            } else { 
             return false; 
            } 
            } else { 
            return false; 
            } 
           }) 
     } 

Więc mój problem:

Jeśli jestem loggedin i obserwowalne zwraca true -> cool mój element menu pojawia się

, ale jeśli obserwowalne zwraca false -> moje menu jest emp ty -> co jest nie tak?

Answer 1

wyrażenia *ngIf="!isAuth() | async" będzie interpretowane jako:

isAuth() -> returns observable 
!isAuth() -> returns false because of ! 
!isAuth() | async -> actually trying to subscribe on false which should fail 

Wystarczy użyć !(isAuth() | async) zamiast.

Innym problemem jest to, że dwa razy wywołasz serwer podczas ładowania szablonu. To jest coś, czego prawdopodobnie nie chcesz robić.

I wreszcie, to

this.loginservice.getAuthenticated() 
       .map(user => { if(user){ 
           if(user.hasOwnProperty('uid')){ 
            return true; 
           } else { 
            return false; 
           } 
           } else { 
           return false; 
           } 
          }) 

można zapisać jako

this.loginservice.getAuthenticated() 
    .map(user => user && user.hasOwnProperty('uid')) 

i kanciasty 5+ jak

this.loginservice.getAuthenticated().pipe(
    map(user => user && user.hasOwnProperty('uid')) 
)