Javascript 在Angular 4中获取数据

我从angular 4和服务器端渲染开始，目前我正在尝试获取一些外部API数据的概念证明。该API返回一个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对象？原因可能是什么？

由于getUsers（）在内部调用getData，因此不必在构造函数内部再次调用

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

还要将console.log放在subscribe方法中以查看实际数据

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

编辑 正如下面的评论所说，不建议在构造函数内调用方法，让组件实现ngOnit并在内部添加方法，因为getUsers（）在内部调用getData，所以不必在构造函数内再次调用

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

还要将console.log放在subscribe方法中以查看实际数据

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

编辑

---

正如下面的评论所说，不建议在构造函数中调用方法，使组件实现ngOnit，并在构造函数中添加正确的方法。您的

res

实际上是一个

可观察的

，而不是数据本身。观测值是异步的。要查看真实数据，请在

subscribe（）

上记录

console.log。回调函数，或者您可以在
map
回调函数中查看它。这是正确的。您的
res
实际上是一个
可观察的
，而不是数据本身。观测值是异步的。要查看真实数据，请在
subscribe（）
上记录
console.log。回调函数，或者您可以在
map
callback函数中查看它。若要添加此函数。。。不建议在构造函数中执行异步操作。相反，使用ngOnInit生命周期钩子方法。此外，通常建议将数据访问移动到自己的服务中。我这里有一个完整的例子：（在APM最终文件夹）添加到这个。。。不建议在构造函数中执行异步操作。相反，使用ngOnInit生命周期钩子方法。此外，通常建议将数据访问移到其自己的服务中。我这里有一个完整的例子：（在APM最终文件夹中）