Angular2.RC1 http observable 未传递给组件答案

【问题标题】：Angular2.RC1 http observable not passing to componentAngular2.RC1 http observable 未传递给组件
【发布时间】：2016-06-11 18:36:08
【问题描述】：

在从我的服务接收数据的组件上获取可观察数组时遇到一些问题。

服务加载正常，我可以看到对象。但是组件没有将数据加载到博客数组中。

服务逻辑：

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

}

我是否误解了 observable 的工作原理？它是否应该不加载带有返回“body”的博客对象

编辑：

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

【问题讨论】：

你在执行你的HTTP请求时有什么错误吗？
console.log(body); 是否在 JavaScript 控制台中打印某些内容？
确实如此，它记录了博客对象数组。

标签： http get angular

【解决方案1】：

也许您在引导应用程序时忘记指定 HTTP_PROVIDERS：

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

否则，组件和服务的代码看起来都很好。

编辑

也许您可以强制 Angular 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);
  }
}

【讨论】：

我做到了，它在引导程序中注入了提供程序，但我会添加我的 main.ts
由于您在服务中收到数据，您也许可以强制 Angular 2 检测更改...我相应地更新了我的答案。
嗯还是一无所有。奇怪的是组件订阅中的 console.log(blogs) 也会记录对象数组。
原来这是视图的问题，而不是组件的问题。

【解决方案2】：

这里的问题是视图没有正确复制到公共目录。使用新的 *ngFor。

同时声明时数组没有被设置为空：

博客：博客[]; vs 博客：博客[] = []

现在它可以工作了，并通过另一个使用类似逻辑的部分进行了验证。

【讨论】：