时间戳

首页 > 解决方案 > Angular 6 中的可观察实现

angular - Angular 6 中的可观察实现

问题描述

我一直在努力理解 Angular Observables 但我可以让它工作t 获取用户数据。下面是我的实现

这是用户界面：

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

我没有发布注销功能只专注于获取数据。在导航栏 html 组件中，我必须遵循：

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

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

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

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

标签： angulartypescriptrxjs

解决方案

是的，因为 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。

推荐阅读