Angular 6中的可观察实现

Question

我一直在努力理解Angular Observables，但我可以让它工作。我正在尝试将数据提供给我的动态导航栏，我成功验证用户是否已登录，因此显示登录或注销按钮但我可以'得到用户数据.Below是我的实现

这是用户界面：

 interface User{
 status:boolean,
 username:string,
 email:string
 }

用户服务：

export class UserService {

private Userr :BehaviorSubject<User>

 constructor(private http:HttpClient) { 
this.Userr = new BehaviorSubject<User>({
  status:false,
  username:"",
  email:""  
});
}
setUser(user:User){
this.Userr.next(user);
 }
 get getUserData(){
  return this.Userr.asObservable();
}
 get retrieveData(){
return this.http.get<User>('/api/userdata')
}
}

以下是我的navbar ts组件实现：

export class NavbarComponent implements OnInit {

isLoggedIn$: Observable<boolean>;        
 User$ : Observable<User>;
 constructor(private authService: AuthService,private router:Router,private 
 user:UserService) { }

 ngOnInit() {
 this.isLoggedIn$ = this.authService.getLoggedIn; 
 this.User$ = this.user.getUserData;
 }
 }

我没有发布注销功能只关注获取数据。在navbar html组件中，我必须遵循：

<a class="nav-link" (click)="logout()" routerLink='/welcome'>Welcome 
{{User$.username}}!,Log Out!</a>

错误是User $ .username未定义。谢谢

编辑对于遇到此问题的任何人，解决方案是获取用户名，如下所示：

{{(User$ | async).username}}!

Answer 1

是的，因为User $是一个可观察的。所以它还没有回来。有两种选择：

1）{{ (User$ | async).username }}是一个等待可观察的Angular语法

2)

export class NavbarComponent implements OnInit {

isLoggedIn$: Observable<boolean>;        
 User$ : Observable<User>;
 user: User = {};
 constructor(private authService: AuthService,private router:Router,private 
 user:UserService) { }

 ngOnInit() {
 this.isLoggedIn$ = this.authService.getLoggedIn; 
 this.User$ = this.user.getUserData.subscribe(user => this.user = user);
 }
 }

{{user.username}}

您可以在订阅方法中等待observable并将其分配给用户变量。返回时，Angular将使用用户名的值更新dom。