无法访问组件中的服务变量 - Angular2

Question

我正在服务中进行 HTTP 调用并将返回数据分配给服务变量。现在，当我尝试访问组件中的该服务变量时，它在控制台中记录为未定义。但是，当我将日志代码放入服务本身时它会被记录，但在组件中它不起作用。

以下是我的参考代码：

hero.service

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;
gbl: 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'];
    this.gbl = body;
    return body || { };

  }
  private handleError (error: Response | any) {
    Handles Error
  }

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

hero-list.component

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

@Component({
  template: `Template`
})

export class HeroListComponent {
  errorMessage: string;
  heroes: Hero[];
  listlcl: Hero[];
  id: number;
  public listheroes: Hero[];
  mode = 'Observable';
  private selectedId: number;

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

  ngOnInit() { this.getHeroes() }
  getHeroes() {
  this.id = this.route.snapshot.params['id'];
  console.log(this.id);
    this.heroService.getHeroes()
                     .subscribe(
                       heroes => {
                       this.heroes = heroes;
                       this.listlcl = this.heroService.gbl;
                       console.log(this.listlcl);
                       },
                       error =>  this.errorMessage = <any>error);
  }

  isSelected(hero: Hero) { return hero.id === this.id; }

  onSelect(hero: Hero) {
    this.router.navigate(['/hero', hero.id]);
  }
}

Answer 1

您的代码的问题是当您在映射中使用extractData this 变量不是您的服务实例，它被分配给http请求的映射器。

您可以简单地将您的函数转换为箭头函数，以便将范围设置为如下所示的服务实例，您将能够看到组件中的变量值现在已正确分配给服务实例。

private extractData = (res: Response) => {
    let body = res.json()['data'];
    this.gbl = body;
    return body || { };    
  }

检查这个Plunker!!

希望这会有所帮助！

一些参考，取自typescript documentation，

this 和箭头函数

在 JavaScript 中，这是一个在函数运行时设置的变量 叫。这使它成为一个非常强大和灵活的功能，但它 代价是必须始终了解 函数正在执行。这是出了名的令人困惑，尤其是 返回函数或将函数作为参数传递时。

我们可以通过确保函数绑定到正确的 this 在我们返回稍后使用的函数之前。这边走， 无论以后如何使用，它仍然可以看到 原始甲板对象。为此，我们将函数表达式更改为 使用 ECMAScript 6 箭头语法。箭头函数捕获 this 函数的创建位置而不是调用位置