Question

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

服务加载正常，我可以看到对象。但是Component没有将数据加载到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);
    }

}

我是否误解了观察者的工作原理？它是否应该使用return＆＃34; body＆＃34;

加载博客对象

编辑：

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

也许您在引导应用程序时忘记指定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); } }

Answer 2

此处的问题是视图未正确复制到公共目录。使用新的* ngFor。

当声明时，数组也没有设置为空：

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

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

Angular2.RC1 http observable不传递给组件

2 个答案: