Question

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

以下是我的参考代码：

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));
  }
}

英雄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请求的映射器。

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

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

检查Plunker !!

希望这会有所帮助!!

一些参考，取自typescript documentation，

此功能和箭头功能

在JavaScript中，这是一个函数所设置的变量   调用。这使它成为一个非常强大和灵活的功能，但它   总是需要了解a的上下文   函数正在执行。这尤其令人困惑   返回函数或将函数作为参数传递时。

我们可以通过确保函数绑定到正确来解决这个问题   在我们返回稍后要使用的函数之前。这条路，   无论以后如何使用它，它仍然能够看到   原始甲板对象。为此，我们将函数表达式更改为   使用ECMAScript 6箭头语法。箭头功能捕获了这一点   创建函数的位置而不是调用它的位置

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

1 个答案: