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

Question

问)谁能用一个清晰​​的例子解释如何实现这一点？

我在这里完成了 Angular2 with TypeScript 教程:

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

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

http://jsonplaceholder.typicode.com/users

但是 Google 还没有编写教程的下一部分。

帮助将不胜感激!

Answer 1

您需要利用 Http 类。注入(inject)后，可以使用它来异步获取数据:

@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 在这个层面上利用了 observables。您可以使用 async 管道或订阅回调...

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

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

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);