Typescript 如何在angular 2中调用http调用？_Typescript_Angular

Typescript 如何在angular 2中调用http调用？

typescript angular

Typescript 如何在angular 2中调用http调用？,typescript,angular,Typescript,Angular,您能告诉我如何在angular 2中调用http调用并使用ng repeat显示数据吗这是我的密码为了使用它，您需要它“注入”Http constructor(private http: Http){ http.get('https://...') .map(response => { response.json(); }) .subscribe(value => { this.data = value;}) } 为了使用它，您需要它“注入”Http

您能告诉我如何在angular 2中调用http调用并使用ng repeat显示数据吗

这是我的密码

为了使用它，您需要它“注入”

Http

constructor(private http: Http){
  http.get('https://...')
    .map(response  => { response.json(); })
    .subscribe(value => { this.data = value;})  
}

为了使用它，您需要它“注入”

Http

constructor(private http: Http){
  http.get('https://...')
    .map(response  => { response.json(); })
    .subscribe(value => { this.data = value;})  
}

首先，需要将

Http

实例注入组件：

export class AppComponent {
  toDoModel;

  constructor(private _router:Router,private http:Http) {
    this.http.get('data.json')
        .map(res => res.json())
  }
}

然后，有两种方法可以在

ngFor

中显示数据：

通过订阅

get

方法返回的可观察对象

@Component({
  template: `
    <ul>
      <li *ngFor="#elt of elements">{{elt.name}}</li>
    </ul>
  `
})
export class AppComponent {
  toDoModel;

  constructor(private _router:Router,private http:Http) {
    this.http.get('data.json')
        .map(res => res.json())
        .subscribe(data => {
          this.elements = data;
        });
  }
}

在引导应用程序时，不要忘记指定

HTTP\u提供程序

：

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

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

下面是相应的plunkr:

您还可以将HTTP处理放入专用服务中，如下所述：