Angular2.RC1 HTTP-Observable nicht übergeben an Komponente

Question

Haben einige Probleme mit dem Erhalten der beobachtbaren Array auf meiner Komponente die Daten von meinem Dienst erhalten.

Der Service lädt gut, und ich kann die Objekte sehen. Die Komponente lädt die Daten jedoch nicht in das Blog-Array.

Service-Logik:

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import 'rxjs/Rx'; 
import { Observable }  from 'rxjs/Observable'; 

import { Blog } from '../models/blog.ts'; 


@Injectable() 

export class BlogService { 

    private blogsUrl:string = '/blog.json' 

    constructor(
     private _http: Http 
     ){} 

    getBlogs(): Observable<Blog[]>{ 
     return this._http.get(this.blogsUrl) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     console.log(body); 
     return body || {}; 
    } 

    private handleError(error: any) { 
     // In a real world app, we might use a remote logging infrastructure 
     // We'd also dig deeper into the error to get a better message 
     let errMsg = (error.message) ? error.message : 
      error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
     console.error(errMsg); // log to console instead 
     return Observable.throw(errMsg); 
    } 

} 

Component Logic:

import { Component, OnInit } from '@angular/core'; 
import { config } from '../config'; 
import { BlogService } from './services/blog.srv' 
import { Blog } from './models/blog'; 

@Component({ 
    selector: 'blog-component', 
    templateUrl: config.templateUrl + './blog/views/blog.component.html', 
    styleUrls: ['/assets/js/app/blog/styles/blog.component.css'], 
    providers: [ 
     BlogService 
    ] 
}) 

export class BlogComponent implements OnInit{ 
    public page = 'Blog'; 
    errorMessage: string; 
    blogs: Blog[]; 
    mode = 'Observable'; 

    constructor(
     private _blogSrv: BlogService 
      ){} 

    ngOnInit() { 
     this.getBlogs(); 
    } 

    getBlogs(){ 
     return this._blogSrv.getBlogs() 
      .subscribe(
      blogs => this.blogs = blogs, 
      error => this.errorMessage = <any>error); 
    } 

} 

Bin ich Missverständnis, wie die beobachtbaren funktioniert? Sollte es nicht die Blogs mit der Rückkehr "Körper" Objekt laden

EDIT:

Main.ts:

/// <reference path="../typings/browser.d.ts" /> 

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { ROUTER_PROVIDERS } from '@angular/router'; 
import { HTTP_PROVIDERS } from '@angular/http'; 
import { AppComponent } from './app.component'; 


bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    HTTP_PROVIDERS 
]); 

Answer 1

Das Problem hierbei ist, dass die Ansicht nicht richtig an das öffentliche Verzeichnis kopiert unten wurde. mit dem neuen * ngFor.

Auch wurde das Array nicht gesetzt wird, wenn declare zu leeren so:

Blogs: Blog []; vs blogs: Blog [] = []

Jetzt funktioniert es, verifiziert mit einem anderen Abschnitt, der ähnliche Logik verwendet.

Answer 2

Vielleicht vergessen Sie HTTP_PROVIDERS angeben, wenn Ihre Anwendung Bootstrapping:

bootstrap(AppComponent, [ HTTP_PROVIDERS ]); 

Ansonsten sieht der Code von Komponente und Service gut aus.

bearbeiten

Vielleicht könnten Sie Angular 2 zwingen, Veränderungen zu erkennen:

@Component({ 
    (...) 
}) 
export class BlogComponent implements OnInit{ 
    public page = 'Blog'; 
    errorMessage: string; 
    blogs: Blog[]; 
    mode = 'Observable'; 

    constructor(
    private _blogSrv: BlogService, 
    private _cdr:ChangeDetectorRef 
     ){} 

    ngOnInit() { 
    this.getBlogs(); 
    } 

    getBlogs(){ 
    return this._blogSrv.getBlogs() 
     .subscribe(
     blogs => { 
      this.blogs = blogs; 
      this._cdr.detectChanges(); // <------ 
     }, 
     error => this.errorMessage = <any>error); 
    } 
}