具有 restful 服务的 angular2

Question

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

时它不起作用

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

上面的url将returnjson值如下,

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

app.module

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

HeroService.ts

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()); 
}

HeroListComponent

@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

as echonax 说不要使用相对路径并像这样设置 header :

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

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

Answer 2

如果返回的是：

{ "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>

并且使用安全导航运算符很有用:)

希望对您有所帮助！

具有 restful 服务的 angular2

angular2 with restful service

web-services

restful-url

angular2-services

angular