Angular 2 Tour of Heroes不起作用

[英]Angular 2 Tour of Heroes doesn't work


I tried to write application based on tour of heroes. I have Spring application which shares resources and client app which should get this data. I know that resources get to client app, but I can't print it.

我试着根据英雄之旅来编写应用程序。我有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);
}
}

In method extract data when I printed by console.log(body.data) I get undefined, but when I printed console.log(body) I get list of objects, therefore I return body instead body.data.

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

And when I print objects in extractData I get list of objects, but in AppComponent when I print console.log(this.items) I get undefined.

当我在extractData中打印对象时,我获得了对象列表,但是当我打印console.log(this.items)时,在AppComponent中,我得到了未定义的内容。

What's going on?

这是怎么回事?

1 个解决方案

#1


0  

this.getHeroes() returns an Observable which means that you can't get data out of it unless you subscribe to it. Think about it like a magazine subscription, by calling this.getHeroes(), you have registered for the magazine but you don't actually get the magazine until it gets delivered.

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

In order to get a console.log of the data that comes back in AppComponent, replace the .subscribe block with the following:

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

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

To further the magazine analogy, inside the subscribe block, you have received the magazine and here we are console logging its contents.

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

Hope this helps

希望这可以帮助

智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2017/04/18/4ca767de54bf88bd1f8925b5182c339e.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告