angular - Bileşende servis değişkenine erişilemiyor - Angular2

Bir serviste bir HTTP çağrısı yapıyorum ve dönen veriyi bir servis değişkenine atıyorum. Şimdi o servis değişkenine bir bileşende erişmeye çalıştığımda, konsolda undefined olarak görünüyor. Ancak log kodunu servisin kendisine koyduğumda loglanıyor ama bileşende çalışmıyor.

Aşağıda referans için kodum bulunmaktadır:

kahraman.servis

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

kahraman-listesi.bileşen

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

Cevap #1

Kodunuzdaki sorun, extractData'yi map içinde kullandığınızda this değişkeninin servisinizin örneği olmaması, HTTP isteğinin mapper'ına atanmasıdır.

Fonksiyonunuzu basitçe bir Ok fonksiyonuna dönüştürebilirsiniz, böylece kapsam aşağıdaki gibi servis örneğine ayarlanır ve değişkenin değerini artık doğru şekilde servis örneğine atanmış olan komponent içinde görebilirsiniz.

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

Bu Plunker'a bak!!

Umarım bu yardımcı olur!!

TypeScript belgelerinden alınmış bazı referans,

bu ve ok fonksiyonları

JavaScript'te bu, bir fonksiyon çağrıldığında ayarlanan bir değişkendir. Bu onu çok güçlü ve esnek bir özellik yapar, ancak bir fonksiyonun hangi bağlamda çalıştığını her zaman bilme zorunluluğu maliyetiyle gelir. Özellikle bir fonksiyon döndürürken veya bir fonksiyonu argüman olarak geçirirken bu ünlü şekilde kafa karıştırıcıdır.

Bunu, fonksiyonu daha sonra kullanılmak üzere döndürmeden önce doğru this değeri ile bağlandığından emin olarak düzeltebiliriz. Bu şekilde, fonksiyon daha sonra nasıl kullanılırsa kullanılsın, orijinal deck nesnesini görebilecektir. Bunu yapmak için, fonksiyon ifadesini ECMAScript 6 ok (arrow) sözdizimini kullanacak şekilde değiştiririz. Ok fonksiyonları, fonksiyonun çağrıldığı yerde değil, oluşturulduğu yerdeki this değerini yakalar.