angular2 mit erholsamen Service

Question

Ich versuche RESTful Service mit meiner Angular2-Anwendung. Es funktioniert, wenn ich lokale json url (/app/config.json) geben. Aber es funktioniert nicht, wenn ich mit der unteren URL versuche.

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

Die obige URL json Wert wie unten zurück,

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

Wenn das, was zurückgegeben wird, ist:

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

Dies bedeutet, dass dies ein Objekt und kein Array yo ist Sie können in Ihrer Vorlage durchgehen.

So ändern vielleicht den Variablennamen nur Helden, da es sich um ein Objekt ist und kein Array, aber das ist nur ein Detail;) Hier werde ich heroes obwohl verwenden:

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

Dann nicht Sie tun müssen die Antwort auf laufen, zeigen sie nur an, wie so:

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

Und es ist nützlich, um die sichere Navigation Operator zu verwenden :)

hoffe, das hilft!

Answer 2

als echonax sagte nicht relative Pfade und setzen Header wie folgt verwenden:

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

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