使用离子 3（角度 4）从服务器读取 json

Question

我有一个提供程序从本地服务器获取数据并给我响应

我有一个提供者从本地服务器获取数据并给我响应

    import { HttpClient } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/catch';
    import {Observable} from 'rxjs/Rx';


    @Injectable()
    export class UserProvider {

      baseUrl;
      constructor(public http: HttpClient) {
        this.baseUrl = "http://127.0.0.1:8000/api/";
      }

      public getUser(): Observable<any> {
        return this.http.get(this.baseUrl + "user/1")
          .map( (response: Response) => {
          const data = response;
          return data; } );
      }


    }

在一个页面上，我在 getUser() 函数中订阅它并尝试处理它

      import {Component} from '@angular/core';
      import {NavController} from 'ionic-angular';
      import {UserProvider} from "../../providers/user/user";

      @Component({
        selector: 'page-home',
        templateUrl: 'home.html'
      })
      export class HomePage {

        user: any;

        constructor(
          public navCtrl: NavController,
          private userProvider:UserProvider,
        ) {        


        }

        ngOnInit(){
          this.getUser();
        }



        getUser(){
          this.userProvider.getUser().subscribe(data =>{
            console.log(data);
            this.user = data;
          });
        }


      }

但用户仍然未定义，我无法获取对象的字段，这有什么问题？

Answer 1

我会替换

public getUser(): Observable<any> {
    return this.http.get(this.baseUrl + "user/1")
      .map( (response: Response) => {
      const data = response;
      return data; } );
  }

由

 import { tap }      from 'rxjs/operators';
 public getUser(): Observable<any> {
    return this.http.get(this.baseUrl + "user/1")
      .pipe(tap(this.extractData));
  }
  private extractData(res: Response) {
    return res || [];
  } 

最后一个：

    getUser(){
      this.userProvider.getUser().subscribe(data =>{
        console.log(data);
        this.user = data.body;
      });
    }