Angular 2应用程序中未调用服务

Question

我是Angular 2的新手，需要帮助才能致电服务。

这是我制作的Plnkr：

https://plnkr.co/edit/wss2Jy41pYyjQUOk47es?p=preview

Put code here

Answer 1

首先，请确保您已导入HttpModule并包含在ngModule中。

其次，您无法显示profile，就像：

{{profile}}

因为您的个人资料包含username等属性

否则你的代码看起来很不错。因为你的json看起来像这样：

{
  "profile":
    {
      "username":"eric",
      "bio":"Cofounder of Thinkster.io, kinda looks like Peeta from the Hunger Games",
      "image":"http://i.imgur.com/S66L2XZ.jpg",
      "following":false
    }
}

我会像这样映射传入的数据：

.map((res: Response) => res.json().profile);

所以你得到一个整洁的对象：

{
  "username": "eric",
  "bio": "Cofounder of Thinkster.io, kinda looks like Peeta from the Hunger Games",
  "image": "http://i.imgur.com/S66L2XZ.jpg",
  "following": false
}

然后，您可以使用您的属性显示您的个人资料，例如：{{profile.username}}

这是plunker