Question

我试着根据英雄之旅来编写应用程序。我有Spring应用程序共享资源和客户端应用程序，它应该获取此数据。我知道资源可以访问客户端应用程序，但我无法打印它。

import { HeroesService } from './shared/HeroesService';
import { Observable } from 'rxjs/Observable';
import { Hero } from './shared/Hero';
import { OnInit } from '@angular/core';
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: require('app/app.component.html!text')
})

export class AppComponent implements OnInit {
  errorMessage: string;
  items: Hero[];
  mode: string = 'Observable';
  firstItem: Hero;

constructor(private heroesService: HeroesService) { }

ngOnInit(): void {
    this.getHeroes();
    console.log(this.items);
    //this.firstItem = this.items[0];
  }

getHeroes() {
    this.heroesService.getHeroes()
              .subscribe(
                  heroes => this.items = heroes,
                  error => this.errorMessage = <any>error
                );
  }
}


import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Hero } from './Hero';

@Injectable()
export class HeroesService {

    private heroesUrl = 'http://localhost:8091/heroes';

constructor(private http: Http) { }

getHeroes(): Observable<Hero[]> {
    return this.http.get(this.heroesUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
}

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

private handleError(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
        const body = error.json() || '';
        const err = body.error || JSON.stringify(body);
        errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
        errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
}
}

在我通过console.log（body.data）打印的方法提取数据中，我得到了未定义，但是当我打印console.log（正文）时，我得到了对象列表，因此我返回body而不是body.data。

当我在extractData中打印对象时，我获得了对象列表，但在AppComponent中，当我打印console.log（this.items）时，我得到了未定义。

发生了什么？

Answer 1

this.getHeroes()返回一个Observable，这意味着除非您订阅它，否则无法从中获取数据。想想它就像一本杂志订阅，通过调用this.getHeroes（），你已经注册了该杂志但你实际上没有得到该杂志，直到它被交付。

要获取AppComponent中返回的数据的console.log，请将.subscribe块替换为以下内容：

.subscribe(
  (heroes) =>{
    console.log(heroes);
    this.items = heroes;
  },
  error => this.errorMessage = <any>error
);

为了进一步推动杂志类比，在订阅栏内，您已收到杂志，我们在这里控制台记录其内容。

希望这有帮助

Angular 2 Tour of Heroes不起作用

1 个答案: