Web services 安格拉尔2号，服务周到

我正在用Angular2应用程序尝试RESTful服务。 当我给出本地json url

（/app/config.json）

时，它就工作了。但当我尝试使用下面的url时，它不起作用

URL:

http://localhost:8082/RESTful_Jersey_JSON/rest/json/metallica/get

上面的url将返回json值，如下所示

{
“标题”：“SingerName”，
“歌手”：“歌手123”，
“id”：“1”，
“名称”：“Hero123”
}

应用程序模块

@NgModule（{
声明：[AppComponent、HeroListComponent、HeroDetailComponent]，
导入：[BrowserModule，HttpModule，routing]，引导：[AppComponent]
})

HeroService.ts

getHeroes（）{
var headers=新的头（{'Content Type'：'application/json'}）；
let options=newrequestoptions（{headers:headers}）；
返回这个。_http.request（“localhost:8082/RESTful\u Jersey\u JSON/rest/‌​json/metallica/….map（（res:Response）=>res.json（））；
}

HeroListComponent

@组件（{
选择器：“我的英雄细节”，
模板：`
英雄列表组件

{{英雄}}
{{hero.id}}
{{hero.name}}
`
})
导出类HeroListComponent实现OnInit{
英雄=[]；
构造函数（私有_heroService:heroService）{}
ngOnInit（）{
这是。_heroService.getheros（）。
.subscribe（response=>this.heros=response）；
}    
}

如前所述，不要使用相对路径并按如下方式设置标题：

let options = new RequestOptions({ headers: headers });

return this._http.get("/assets/herolist.json", options ).map((res:Response) => res.json());

---

如果返回的是：

{ "title": "SingerName", "singer": "Singer123", "id": "1", "name": "Hero123" }

这意味着这是一个对象，而不是可以在模板中迭代的数组

因此，也许可以将变量名更改为just hero，因为它是一个对象而不是数组，但这只是一个细节；）这里我将使用

heros

：

ngOnInit(){    
  this._heroService.getHeroes().
     subscribe(response => this.heroes = response);    
} 

然后，您不需要迭代响应，只需按如下方式显示：

<div>
  {{heroes?.id}}
  {{heroes?.name}}
</div>

{{英雄？.id}
{{英雄？.name}

使用安全导航操作符也很有用：）

---

希望这有帮助！

您不能在rest请求中输入这样的相对路径。如果您直接在浏览器中打开rest链接，它是否工作？是的，rest链接在浏览器/邮递员客户端中工作。谢谢@echonax。我可以使用这样的请求方法调用该url吗？\u http.request？@Santhoshkumar好的，但是在哪里/如何使用

getHeroes

？请编辑您的问题并将其添加到那里，从评论部分很难阅读。谢谢您，Bougarfaoui。/assets/herolist.json已经在工作。我需要连接REST服务，如“”。谢谢。它正在与安全导航操作符{{heros？.id}{{heros？.name}一起工作.非常欢迎！是的，在angular的异步世界中，安全导航操作符是一件很棒的事情：祝您晚上/晚上愉快，编码愉快！：）