不能訪問組件的服務變量 - 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)); 
    } 
} 

與您的代碼英雄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採取

這個和箭頭功能

在JavaScript中，這是當一個函數是 稱爲某個設定的變量。這使得它非常強大和靈活的功能，但它 是以犧牲總是有了解一個 函數執行上下文成本。這返回一個函數或傳遞函數作爲時是出了名的混亂，尤其是 論據。

我們可以確保我們之前返回函數稍後使用的功能結合到正確 這個解決這個問題。這樣一來，無論 它是如何使用後，它仍然能夠看到 原來的甲板對象。爲此，我們使用ECMAScript 6箭頭語法將函數表達式更改爲 。箭頭函數捕獲這個函數被創建的位置而不是它被調用的位置