Наблюдаемая реализация в Angular 6

Question

Я с трудом разбираюсь в Angular Observables, но я могу заставить его работать. Я пытаюсь получить данные на своей динамической панели навигации, и мне удалось проверить, вошел ли пользователь в систему или нет, и поэтому показывает кнопку «Вход» или «Выход», но Я не могу получить данные пользователя. Ниже моя реализация

Это пользовательский интерфейс :

 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 componentenet мне нужно следующее:

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

И ошибка в том, что пользователь $ .username не определен .Спасибо

Редактировать Для тех, кто сталкивается с этой проблемой, решение состоит в том, чтобы получить имя пользователя следующим образом:

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

Answer 1

Да, потому что пользователь $ является наблюдаемым.Так что еще не вернулся.Есть два варианта:

1) {{ (User$ | async).username }}, который является угловым синтаксисом для ожидания наблюдаемого

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

Вы можете ждать наблюдаемого вметод подписки и назначьте его пользовательской переменной.Когда он вернется, Angular обновит dom со значением имени пользователя.