如何在角锥2的输出变量中传递Web服务

Question

我需要传递从导出var英雄:英雄函数中从服务器获取的JSON数据

链接是https://angular.io/resources/live-examples/toh-5/ts/eplnkr.html

app/mock-heroes.ts，文件包含以下数据，

import { Hero } from './hero';

export var HEROES: Hero[] = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombasto'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'}
];

我需要从服务器获取这些数据，而不是使用静态数据。我怎样才能做到这一点。

我已经使用以下代码获取了数据服务，

private serviceUrl = "http://localhost:9000/service";

getServiceOne(): Observable<Track[]> {
  this.http.get(this.serviceUrl)
      .map(res => res.json());

}

输出是

[
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombasto'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'}
]

只需要将上面的数据解析为导出变量英雄:英雄。

我怎样才能做到这一点。我是新的类型，我已经花了3天寻找输出，但没有得到任何结果。

Answer 1

如果后端有一个web，您可以从服务器上获得英雄。如果没有，您可以像在文档中描述的那样模拟web。有关更多信息，请参见模拟web。

getHeroes(): Promise<Hero[]> {
  return this.http.get(this.heroesUrl)
           .toPromise()
           .then(response => response.json().data as Hero[])
           .catch(this.handleError);

如果不想使用承诺，那么可以使用需要订阅的Rxjs 观测值来获取数据。

getHeroes(): Observable<Hero[]> {
  return this.http
           .get('app/heroes')
           .map(response => response.json().data as Hero[]);

在组件中

this._heroService
    .getHeroes()      
    .subscribe(h => this.HEROES = h)