Angular2 http.get код не работает

Question

Я пытаюсь этот код в Angular2 бета 15.

import {Component} from 'angular2/core'; 
import {Http, Response} from 'angular2/http'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <h2>Basic Request</h2> 
     <button type="button" (click)="makeRequest()">Make Request</button> 
     <div *ngIf="loading">loading...</div> 
     <pre>{{data.title}}</pre> 

    ` 

}) 
export class AppComponent { 

    data: any; 
    loading: boolean; 

    constructor(public http: Http) { 
    } 
    makeRequest(): void { 
     this.loading = true; 
     this.http.get('http://jsonplaceholder.typicode.com/photos/1') 
      .map((res: Response) => res.json()) 
      .subscribe(res => { 
       this.data = res; 
       this.loading = false; 
      }); 
    } 

} 

По какой-то причине он получает данные, но не отображает его.

Что мне здесь не хватает?

Answer 1

Мой код работает отлично на "angular2": "2.0.0-beta.15":

import {Component} from 'angular2/core'; 
import {HTTP_PROVIDERS,Http,Response} from 'angular2/http'; 
// see issue more detail here : https://github.com/angular/angular/issues/5632#issuecomment-167026172 
import 'rxjs/Rx'; 



@Component({ 
    selector: 'my-app', 
    template: ` 
     <h2>Basic Requests</h2> 
     <button type="button" (click)="makeRequest()">Make Request</button> 
     <div *ngIf="loading">loading......</div> 
     <pre>title : {{array.title}}</pre> 

    `, 
    providers: [HTTP_PROVIDERS] 
} 
export class AppComponent { 

    array = Array<any>; 
    loading: boolean; 

    constructor(
     public http:Http 
    ){ 

    } 
    makeRequest(): void { 
     this.loading = true; 
     this.http.get('http://jsonplaceholder.typicode.com/photos/1') 
     .map((res: Response) => res.json()) 
      .subscribe(res => { 
       this.array = res; 
       this.loading = false; 
      }); 

    } 

} 

• Импорт import 'rxjs/Rx' см Issue более подробно здесь: https://github.com/angular/angular/issues/5632#issuecomment-167026172
• Импорт import 'HTTP_PROVIDERS'
• dd providers: [HTTP_PROVIDERS]

Answer 2

Все выглядит нормально, просто изменится:

{{data?.title}}

data неопределен, пока ваш запрос не завершится. Оператор elvis помогает избежать нулевого указателя.

Кроме того, добавить недостающий импорт:

import 'rxjs/Rx';