angular - 从 Angular 2 中的 REST url 获取《英雄之旅》中的英雄

Question

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

鉴于我有一个在 http://localhost:7000/heroes 上运行的 API，它会返回 JSON 的“mock-heroes”列表，那么我至少需要做什么才能使这个“固体”？

据我所知，我应该将其放在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