棱角分明2，提供宁静的服务

Question

我正在用我的Angular2应用程序尝试RESTful服务。 当我给本地 json 网址(/app/config.json)时，它正在工作。但是当我尝试使用以下网址时，它不起作用。

网址 ：http://localhost:8082/RESTful_Jersey_JSON/rest/json/metallica/get

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

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

app.module

@NgModule({  
declarations: [  AppComponent,HeroListComponent,HeroDetailComponent],        
imports: [BrowserModule,HttpModule,routing],  bootstrap: [AppComponent]
})

英雄服务网

getHeroes(){ 
var headers = new Headers({ 'Content-Type': 'application/json' }); 
let options = new RequestOptions({ headers: headers }); 
return this._http.request("localhost:8082/RESTful_Jersey_JSON/rest/‌​json/metallica/…) .map((res:Response) => res.json()); 
}

英雄列表组件

@Component({  
selector: 'my-hero-detail',  
template: `
<h2>Hero List Component</h2>  
<ul *ngFor="let hero of heroes">  
{{hero}}  
<li>{{hero.id}}</li>  
<li>{{hero.name}}</li>  
</ul>`  
})
export class HeroListComponent implements  OnInit {  
heroes = []; 
constructor(private _heroService:HeroService) {}  
ngOnInit(){    
this._heroService.getHeroes().
.subscribe(response =>this.heroes = response);    
}    
}

Answer 1

如果返回的内容是：

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

这意味着这是一个对象，而不是您可以在模板中循环访问的数组。

所以也许将变量名称更改为 hero，因为它是一个对象而不是数组，但这只是一个细节;)在这里我将使用heroes：

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

然后你不需要迭代响应，只需像这样显示它：

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

使用安全导航运算符非常有用:)

希望这有帮助！

Answer 2

正如echonax所说，不要使用相对路径并像这样设置标题：

let options = new RequestOptions({ headers: headers });
return this._http.get("/assets/herolist.json", options ).map((res:Response) => res.json());