Question

我一直在努力理解Angular Observables，但是我可以使它正常工作。我试图将数据获取到动态导航栏中，并且成功验证了用户是否已登录，因此显示了Login或Logout按钮，但是我无法获取用户数据。下面是我的实现

这是用户界面：

 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 componenet 中，我必须遵循以下条件：

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

错误是用户$ .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}}

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

Angular 6中的可观察实现

1 个答案: