Question

问：有人能用一个明确的例子解释如何实现这个目标吗？

我在这里使用TypeScript教程完成了Angular2：

https://angular.io/docs/js/latest/quickstart.html

我想替换mock-heroes.ts并获取hero.service.ts来获取真实的http数据。例如。从这里：

http://jsonplaceholder.typicode.com/users

但谷歌尚未编写本教程的下一部分。

非常感谢帮助！

Answer 1

您需要利用Http课程。注入后，您可以使用它来异步获取数据：

@Component({
  template: `
    <ul>
     <li *ngFor="#user of users | async">{{user.name}}</lu>
    </ul>
  `
})
export class AppComponent {
  constructor(private http:Http) {
    this.users = this.http.get(
      'http://jsonplaceholder.typicode.com/users').map(res=>res.json());
  }
}

Angular2利用此级别的可观察量。您可以使用async管道或订阅回调...

在引导您的应用程序时，不要忘记设置HTTP_PROVIDERS：

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

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

Answer 2

像Thierry解释的那样，您需要引导HTTP_PROVIDERS以及在您将进行http调用的组件/服务上导入HTTP类。请记住在index.html中包含http和rxjs javascripts。

以下服务用您的json替换模拟Heroes数据。

import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';
import 'rxjs/Rx'; 

@Injectable()
export class HeroService {
  private _url = 'http://jsonplaceholder.typicode.com/users';
  constructor(private http: Http){}
  getHeroes() { 
    return this.http.get(this._url)
      .map(res => <any[]> res.json())
      .catch(function(err) {console.log("err")}) 
  }
}

为了更好地说明我的意思，我使用您提供的Json快速plunker用http.get请求替换Heroes Mock数据。希望这对你有用。

Angular2快速入门教程 - 用远程http数据替换模拟数据？

2 个答案: