Как позвонить в http-вызов в угловом 2?

Question

не могли бы вы рассказать, как вызвать http-вызов в угловом 2 и отобразить данные с помощью ng-repeat?

вот мой код http://plnkr.co/edit/u6LXrvGuC6f3bOT1tsaZ?p=preview

import {Component,View} from 'angular2/core'; 
import {Http, HTTP_PROVIDERS} from 'angular2/http'; 
import {Router} from 'angular2/router'; 

@Component({ 

    templateUrl: 'home/home.html' 
}) 


export class AppComponent { 
    toDoModel; 
    constructor(private _router:Router) { 
    http.get('data.json') 
     .map(res => res.json()) 

    } 

    onclck(inputValue){ 
    alert(inputValue) 
    this._router.navigate(['Second']); 
    } 

} 

Answer 1

Сначала вам нужно вводить в Http экземпляр в вас компонент:

export class AppComponent { 
    toDoModel; 

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

Есть t курица два способа отображения данных в 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; 
       }); 
      } 
  } 
  

• Усиливая async трубы

  @Component({ 
      template: ` 
      <ul> 
       <li *ngFor="#elt of elements | async">{{elt.name}}</li> 
      </ul> 
      ` 
  }) 
  export class AppComponent { 
      toDoModel; 
  
      constructor(private _router:Router,private http:Http) { 
      this.elements = this.http.get('data.json') 
       .map(res => res.json()); 
      } 
  } 
  

Не забудьте указать HTTP_PROVIDERS, когда развернув приложение:

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

bootstrap(AppComponent, [ HTTP_PROVIDERS ]); 

Вот соответствующий plunkr: https://plnkr.co/edit/bdFeiiAqrPDtFUdguw7s?p=preview.

Вы также можете поместить вашу обработку HTTP в специальную службу, как описано ниже:

• How to Consume Http Component efficiently in a service in angular 2 beta?

Answer 2

Вам это нужно "впрыснуть" Http для того, чтобы использовать его

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