Question

在Angular 2 Tour of heroes tutorial之后，我发现自己想知道如果我使用REST api，我将如何“获得英雄”。

鉴于我在http://localhost:7000/heroes上运行了一个API，它将返回JSON的“模拟英雄”列表，我需要做些什么才能使其“稳固”？

我理解我应该把它放在hero.service.ts;特别是：

@Injectable()
export class HeroService {
    getHeroes() {
        return Promise.resolve(HEROES);
    }
}

但我一直坚持如何使用http GET完成这项工作，更不用说做得很好/风格。

Answer 1

你需要这样做，

@Injectable()
export class OacService {
    constructor(private http: Http) { }
    ot: Observable<string>;

    search(term: string) {

        let serviceUrl = 'http://localhost:8080/getAutoCompleteData?search=' + term;
        this.ot = this.http
            .get(serviceUrl)
            .map(response => response.json());

        return this.ot;
    }
}

在这种情况下，我返回一个Observable的对象，该对象从我的组件类处理，

this.items = this._oacService.search(term);

在我的html模板中，

  <li *ngFor="#item of items | async" (click)="setData(item.name)">
      {{item.name}}<br/>
    </li>

您可以从git，https://github.com/bhaskeryadav/AngularJS2.git

中引用此代码

Answer 2

在他们的教程中，他们使用“InMemoryDataService”

private heroesUrl ='app / heroes'; //网址为web api

构造函数（私有http：Http）{}

getHeroes（）：承诺{       return this.http.get（this.heroesUrl）                  。承诺（）                  .then（response =＆gt; response.json（）。数据为Hero []）                     }

你可以用你的网址替换app / heroes，如果你得到一个包含对象的数组，你可以在json（）之后删除.data。数据

private heroesUrl ='网址到网络API'; //网址为web api

构造函数（私有http：Http）{}

getHeroes（）：承诺{       return this.http.get（this.heroesUrl）                  。承诺（）                  .then（response =＆gt; response.json（）as Hero []）                     }

Answer 3

您必须使用Http类，如下所述：

import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';

@Injectable()
export class HeroService {
  constructor(private http:Http) {
  }

  getHeroes() {
    return this.http.get('http://localhost:7000/heroes').map(res=> res.json());
  }
}

在引导您的应用程序时，不要忘记添加HTTP_ROUTERS：

import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

你现在需要处理一个可观察而不是一个承诺。有关详细信息，您可以查看以下答案：

How to Consume Http Component efficiently in a service in angular 2 beta?

从Angular 2中的REST网址获取英雄之旅中的英雄

3 个答案: