角度,地图:地图给出延迟订阅的结果 [英] angular, map: map give result to subscribe late
问题描述
我想用 Angular
构建一个用户页面.
在我的服务中,我通过此代码获取数据.
getUser(id: number): Observable{return this.http.get(`${this.baseUrl}/getUser.php?id=${id}`).pipe(地图((res)=> {this.user = res['数据'];返回 this.user;}),catchError(UsersService.handleError));}
在组件中,我将数据保存到变量用户中.这是代码.
用户:用户;构造函数(私人用户服务:用户服务,私有 ActiveRout: ActivatedRoute) {}ngOnInit() {this.getUser();}获取用户(){const id = +this.ActiveRout.snapshot.paramMap.get('id');this.UsersSer.getUser(id).subscribe(user => {this.user = 用户;控制台日志(this.user);}, (错误) =>{控制台日志(错误);});
}
并以 html 打印.
<h2>{{user.name}}</h2><div class="profile-status"><i class="fa fa-check-circle"></i>{{user.status}}<img src="../../assets/images/{{user.image}}" alt="" class="profile-img img-responsive center-block"><div class="profile-label"><span class="label label-danger">{{user.role}}</span>
当我在浏览器中运行代码时,我发现数据来得太晚了.
我是堆栈溢出的新手,如果我做错了,抱歉.
错误截图.
有一个 ngif 测试用户不是未定义的,所以在加载之前你没有绑定到它:
<div *ngIf="user != undefined"><h2>{{user.name}}</h2><div class="profile-status"><i class="fa fa-check-circle"></i>{{user.status}}<img src="../../assets/images/{{user.image}}" alt="" class="profile-img img-responsive center-block"><div class="profile-label"><span class="label label-danger">{{user.role}}</span>