使用的模板

Question

我试图通过使用可观察到的在我的模板可观察：

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

和我的模块中：

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

所以我的问题：

，如果我的loggedIn并可观察返回true - >酷我的菜单项出现

但如果observable返回false - >我的菜单是emp ty - >最新错误？

Answer 1

你表达*ngIf="!isAuth() | async"将被解释为：

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

只需使用!(isAuth() | async)代替。

您遇到的另一个问题是您在加载模板时调用服务器两次。这是你可能不想做的事情。

最后，这

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

可以写成

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

，并与角5+作为

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