Sử dụng quan sát ở Template

Question

Tôi cố gắng để sử dụng một thể quan sát được trong mẫu của tôi bằng cách:

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

và trong mô-đun của tôi:

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

Vì vậy, vấn đề của tôi:

nếu tôi loggedin và trả về đúng -> làm mát mục trình đơn của tôi xuất hiện

nhưng nếu quan sát được trả về false -> trình đơn của tôi là emp ty -> có chuyện gì vậy?

Answer 1

biểu hiện của bạn *ngIf="!isAuth() | async" sẽ được hiểu là:

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

Chỉ cần sử dụng !(isAuth() | async) để thay thế.

Một vấn đề khác mà bạn có là bạn gọi máy chủ hai lần trong khi tải mẫu. Đây là điều mà bạn có thể không muốn làm.

Và cuối cùng, điều này

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

có thể được viết như

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

và với góc 5 + như

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