在 Angular 4 中获取数据

Question

我从 angular 4 和服务器端渲染开始，目前我正在尝试获取概念证明以获取我的外部 API 之一的一些数据。那 API return 一个 Json 对象。

网站呈现得很好，但是现在我包含了获取数据的调用，它没有呈现，而且我得到的响应似乎不是我应该得到的。

在app.components.ts我添加了：

 private apiUrl= 'https://myapi/Users';
  data: any = {};

  constructor(private http: Http){
    this.getUsers();
    this.getData();
  }

  getData(){
    let res=this.http.get(this.apiUrl).map((res: Response)=>res.json());
    console.log("result:",res)
    return res;
  }

  getUsers(){
    this.getData().subscribe(data=>{
      this.data=data;
    })
  }

现在，如您所见，在 getData 方法中，我在控制台中打印了 http 调用的结果，但是我得到的是：

Observable {
  _isScalar: false,
  source: Observable { _isScalar: false, _subscribe: [Function] },
  operator: MapOperator { project: [Function], thisArg: undefined } }

为什么我没有到达 json 对象？可能是什么原因？

Answer 1

由于您的 getUsers() 在内部调用了 getData，因此您不必在构造函数中再次调用。

constructor(private http: Http){
    this.getUsers();
   //remove this line this.getData();
 }

也将 console.log 放在订阅方法中以查看实际数据，

getUsers(){
    this.getData().subscribe(data=>{
      this.data=data;
      console.log(this.data);
    })
  }

编辑正如下面的评论所说，不建议在构造函数中调用你的方法，让你的组件实现 ngOnit 并在里面添加方法

在 Angular 4 中获取数据

fetching data in Angular 4

javascript

fetch

angular