typescript - Angular 2-prenumeration fungerar inte

Jag har följande problem med Angular 2 just nu.

Min tjänst fungerar korrekt, jag har lagt till console.log() i min tjänst för att kontrollera att den hämtar data, vilket den gör. Min tjänst ser ut så här:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/map';

@Injectable()
export class Service {
  location: string;

  constructor(private http: Http) {}

  getCurrentLocation(): Observable<string> {
  return this.http.get('service-method-here')
   .map((result: Response) => result.json())
     .map((data: any) => {
       let location: string = '';
       if(data) {
         console.log(data.description);
         location = data.description;
       }
       return this.location;
      });
  }
}

Inuti min komponent kallar jag dock tjänsten så här. Den anropar min tjänst eftersom console.log() som jag hade placerat inuti metoden visas korrekt i konsolen. Så här kallar jag tjänsten inuti min komponent:

import { Component, OnInit } from '@angular/core';
import { FORM_DIRECTIVES } from '@angular/common';
import { Component } from '...';
import { Service } from '...';

@Component({
  selector: 'selector',
  templateUrl: '...',
  styleUrls: ...,
  directives: [FORM_DIRECTIVES, Component]
})
  export class Component implements OnInit {
  public locationName: string;
  constructor(public service: Service) {

  }

  ngOnInit() {
    this.service.getCurrentLocation()
      .subscribe(data => {
              console.log(data);
              this.locationName = data
            },
            error => {
              console.log('error');
            });
}

Koden console.log() inuti komponenten returnerar undefined. HTML:en på min sida för fullständighetens skull ser ut så här:

<h4>{{locationName}}</h4>

Svar #1

I din tjänst den här raden

location = data.description;

borde vara

this.location = data.description;

annars returneras en annan plats än den som angavs

@Injectable()
export class Service {
  location: string;

  constructor(private http: Http) {}

  getCurrentLocation(): Observable<string> {
  return this.http.get('service-method-here')
   .map((result: Response) => result.json())
     .map((data: any) => {
       let location: string = '';
       if(data) {
         console.log(data.description);
         this.location = data.description; // <== 
       }
       return this.location;
      });
  }
}

Svar #2

Det finns två platser 1) lokal let location... 2) och komponenter this.location

.map((data: any) => {
   //let location: string = '';
   if(data) {
     console.log(data.description);
     // we should assign the components property, not the 
     // local variable
     //location = data.description;
     this.location = data.description;
   }
   // this is returned
   return this.location;
  });

Och eftersom komponenterna inte är initierade alls

export class Component implements OnInit {
public locationName: string;
...

vi får odefinierad