Question

我正在使用Angular2应用程序尝试RESTful服务。当我给出本地json url (/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]
})

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

如果返回的是：

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

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

所以也许将变量名称更改为英雄，因为它是一个对象而不是一个数组，但这只是一个细节;）这里我将使用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());

angular2与宁静的服务

2 个答案: