服务可观察在组件 NgOnInIt 中不起作用 - Angular2

Question

我的 getHero 服务 observable 没有在 HeroDetail 组件的 NgOnInIt 中被调用。

我可以使用 HTTP 获取和显示数据 table 并在单击该行时路由到详细信息页面。然后我使用 url 的 "id" 参数来获取 id 但同样不能使用 getHero 函数来获取特定行的详细信息。

ID 显示在控制台中，但英雄未定义。我已经尝试了很多东西，但 none 到目前为止都有效。任何帮助将不胜感激。

下面是我的代码供参考。

hero.service.ts

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 HeroService {
heroes: Hero[];
hero: Hero;

  private heroesUrl = 'SERVICE URL';
  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()['data'];
    console.log(body);
    return body || { };
  }
  private handleError (error: Response | any) {
    // In a real world app, you might use a remote logging infrastructure
    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);
  }

getHero(id: number): Observable<Hero> {
    return this.getHeroes()
      .map(heroes => heroes.find(hero => hero.cc_id == id));
  }
}

英雄-detail.component.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { HeroService } from './hero.service';
import { Hero } from './hero';

@Component({
  template: `
  <h2>INNER PAGE {{ this.id }}</h2>
  `,
  providers: [HeroService]
})

export class HeroDetailComponent {

errorMessage: string;
  hero: Hero;
  heroes: Hero[];
  id: number;
  mode = 'Observable';

  constructor (
  private service: HeroService,
  private route: ActivatedRoute,
  private router: Router
  ) {}


ngOnInit() { this.getHeroes() }

  getHeroes() {
  this.id = this.route.snapshot.params['id'];
  console.log(this.id);

   this.service.getHero(this.id).subscribe(hero => this.hero = hero);
   console.log(this.hero);
  }

}

Answer 1

您正在记录 this.hero 通话结束前。这是因为 Http 调用是异步完成的。

getHeroes() {
    this.id = this.route.snapshot.params['id'];
    console.log(this.id);

    this.service.getHero(this.id).subscribe(hero => {
         this.hero = hero;
         console.log(this.hero);
    });
}

Answer 2

当使用 Observable 时，Observable 外部的代码在实际订阅块执行之前执行，因为 Observable 是异步的。来自服务器的响应来自订阅的回调。尝试将代码更改为以下内容：

this.service.getHero(this.id).subscribe(hero => {
     this.hero = hero;   // assign the class variable values here
     console.log(this.hero); 
  });
}

服务可观察在组件 NgOnInIt 中不起作用 - Angular2

Service observable not working in Component NgOnInIt - Angular2

typescript

angular2-routing

angular2-observables

angular