角度，地图:地图给出延迟订阅的结果 [英] angular, map: map give result to subscribe late

查看：19
本文介绍了角度，地图:地图给出延迟订阅的结果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想用 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>

I want to build a user page with Angular.

In my service I am getting data by this code.

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

}

In component I am saving data into variable user. This is code.

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

}

And printing in 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>

When i run code in browser i see that data comes too late.

I am new in stack overflow sorry if i do mistake.

Errors screenshot.

解决方案

Have an ngif testing that user isn't undefined so you're not binding to it before it's loaded:

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

这篇关于角度，地图:地图给出延迟订阅的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆