Angular2.RC1 http observable이 구성 요소로 전달되지 않습니다.

Question

내 서비스에서 데이터를 수신하는 구성 요소에 관찰 가능 Array를 가져 오는 데 몇 가지 문제가 있습니다.

서비스가 잘로드되고 개체를 볼 수 있습니다. 그러나 구성 요소가 Blog Array에 데이터를로드하지 않습니다.

서비스 로직 :

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); 
    } 

} 

구성 요소 논리 :

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); 
    } 

} 

내가 어떻게 관찰 작품을 오해하고 있는가? 이 블로그는 반환 "몸"객체를로드하지 않겠

편집

:

bootstrap(AppComponent, [ HTTP_PROVIDERS ]); 

:

/// <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

문제는 뷰가 제대로 공용 디렉토리 아래로 복사되지 않았습니다 것입니다. 새로운 * ngFor와 함께.

는 배열이므로 때 선언을 비우도록 설정되지 하였다

블로그 : 블로그 []; 블로그 : 블로그 [] = []

이제는 비슷한 논리를 사용하는 다른 섹션에서 작동하는지 확인합니다.

Answer 2

는 아마도 응용 프로그램을 부트 스트랩 때 HTTP_PROVIDERS를 지정하는 것을 잊었다 :

Main.ts

그렇지 않으면 구성 요소와 서비스의 코드가 모두 정상적으로 보입니다.

편집

은 아마 당신은 변화를 감지하는 각도 2를 강제로 수 있습니다 : 여기

@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); 
    } 
}