角度，地图：地图给出结果以延迟订阅答案

【问题标题】：angular, map: map give result to subscribe late角度，地图：地图给出结果以延迟订阅
【发布时间】：2018-11-23 21:41:37
【问题描述】：

我想用Angular 建立一个用户页面。

在我的服务中，我通过此代码获取数据。

getUser(id: number): Observable<User> {
    return this.http.get(`${this.baseUrl}/getUser.php?id=${id}`).pipe(
        map((res) => {
            this.user = res['data'];
            return this.user;
       }),
       catchError(UsersService.handleError));

}

在组件中，我将数据保存到变量用户中。这是代码。

  user: User;

  constructor(
      private UsersSer: UsersService,
      private ActiveRout: ActivatedRoute) {
  }

  ngOnInit() {
      this.getUser();
  }

  getUser() {
      const id = +this.ActiveRout.snapshot.paramMap.get('id');

      this.UsersSer.getUser(id).subscribe(user => {
          this.user = user;
          console.log(this.user);
      }, (err) => {
          console.log(err);
      });

}

并在 html 中打印。

<div class="main-box clearfix">
    <h2>{{user.name}}</h2>

    <div class="profile-status">
         <i class="fa fa-check-circle"></i> {{user.status}}
    </div>

    <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>
    </div>


</div>

当我在浏览器中运行代码时，我发现数据来得太晚了。

如果我做错了，我是堆栈溢出的新手。

错误截图。

【问题讨论】：

您能否分别显示显示错误的屏幕截图 - 不清楚它显示的是什么
我被加了屏幕。

标签： angular7

【解决方案1】：

有一个 ngif 测试用户不是未定义的，所以在加载之前你没有绑定它：

 <div class="main-box clearfix">
    <div *ngIf="user != undefined">
       <h2>{{user.name}}</h2>

        <div class="profile-status">
         <i class="fa fa-check-circle"></i> {{user.status}}
       </div>

    <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>
    </div>

   </div>
</div>

【讨论】：