Angular 角度HTTP问题

问题是——我真的不知道如何正确使用HTTP服务在我的angular应用程序中获取和显示配置文件信息。 以下是我的用户配置文件组件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from '../user.service';
import { userInfo} from '../shared/users_class';
import { Observable } from 'rxjs/Observable';

@Component({
 selector: 'app-user-profile',
 templateUrl: './user-profile.component.html',
 styleUrls: ['./user-profile.component.css']
})


export class UserProfileComponent implements OnInit {
 id:number;
 userInfo:userInfo;

 constructor(private router: ActivatedRoute, private userService:UserService) { }

 ngOnInit() {

 this.router.paramMap.subscribe(params=>{
  this.id = +params.get("id");
 });

  this.userService.getUserInfoFromDB(this.id).subscribe(data=>{
   console.log(data);
   this.userInfo = new userInfo(data.phone,
     data.marriage_status,
     data.city_birth, 
     data.current_city,
     data.sex
   );
  });
 }
}

我的用户http服务功能：

getUserInfoFromDB(user_id) {
    return this.http.get('http://127.0.0.1:8000/user_info/'+ user_id)
                    .catch((error:any) =>{return Observable.throw(error);});;
}

My JSON-从服务器响应：

{
"id": 4,
"phone": "123456789",
"marriage_status": 0,
"date_birth": "1997-01-23",
"city_birth": "someCity",
"current_city": "someCurrCity",
"sex": "M",
"user": 3
}

和

我的看法是：

<div *ngIf="userInfo.date_birth">
  date_birth: {{userInfo.date_birth}}
</div><br>
<div *ngIf="userInfo.curr_city">
  curr_city: {{userInfo.curr_city}}
</div><br>
<div *ngIf="userInfo.phone">
  phone: {{userInfo.phone}}
</div><br>

出生日期：{{userInfo.date}


curr_city:{{userInfo.curr_city}


电话：{{userInfo.phone}

这里的代码不是上帝的惯例

getUserInfoFromDB(user_id) {
    return this.http.get('http://127.0.0.1:8000/user_info/'+ user_id)
                    .catch((error:any) =>{return Observable.throw(error);});;
}

在catch方法中，想法是处理错误，而不是抛出新的错误

如果您使用的是HttpCLient类，那么数据已经转换为json如果您使用的是HTTP类来执行请求，那么您需要解析响应中的数据

如果您在任何地方都使用可观察到的对象，并让视图处理可观察到的对象，则效果更好

userInfo: Observable<userInfo>

   this.userInfo = this.userService.getUserInfoFromDB(this.id).map(data=>{
return new userInfo(data.phone,
     data.marriage_status,
     data.city_birth, 
     data.current_city,
     data.sex
   );
  });
 }

---

然后阅读文档？您的问题是什么？这仍然不能完全发挥作用，因为您正在组件上同步访问此.idlevel@Jota.Toledo您可以从route服务中使用flatMap并传递传入的id使用paramMap作为源流的目的是什么，而不是在flatMap操作中使用它发出的值？您仍在访问此文件。id@Jota.Toledo对不起，我的错误，我将修复代码，（复制和粘贴问题）

<div *ngIf="(userInfo | async); let user">
  date_birth: {{user.date_birth}}
</div><br>
<div *ngIf="user.curr_city">
  curr_city: {{user.curr_city}}
</div><br>
<div *ngIf="user.phone">
  phone: {{user.phone}}
</div><br>

this.userInfo = this.router.paramMap.flatMap(params=>{
return this.userService.getUserInfoFromDB(params.get("id")).map(data=>{
return new userInfo(data.phone,
     data.marriage_status,
     data.city_birth, 
     data.current_city,
     data.sex
   );
  });
 });