2

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

鉴于我有一个正在运行的 APIhttp://localhost:7000/heroes将返回 JSON 的“模拟英雄”列表，我需要做的最低限度是什么才能使这个“可靠”？

据我所知，我应该把它放进去hero.service.ts；特别是在：

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

但是我完全不知道如何使用http GET来做到这一点，更不用说做得很好/有风格了。

4

3 回答 3

2

你需要这样做，

@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

于 2016-02-07T16:02:34.320 回答
1

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

私人 herosUrl = '应用程序/英雄'; // 网页 api 的 URL

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

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

你可以用你的 url 替换 app/heroes，如果你得到一个包含对象的数组，你可以在 json().data 之后删除 .data

private herosUrl = 'web api 的 URL'; // 网页 api 的 URL

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

getHeroes(): Promise { return this.http.get(this.heroesUrl) .toPromise() .then(response => response.json() as Hero[]) }

于 2016-10-14T08:28:01.283 回答
0

您必须利用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 ]);

你现在需要处理一个 observable 而不是一个 Promise。有关更多详细信息，您可以查看此答案：

于 2016-02-07T12:57:09.520 回答