title: Angular 4 variable is undefined outside subscribe
body: <p>I am working on learning Angular 4. I have written the service and the component. When I call the service I can get the data in the subscribe function, but it does not assign the data to the class variable. Here is my service.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Injectable } from "@angular/core";
  import { Http, Response, Headers, RequestOptions } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map'
  import { Work } from '../shared/work'
  
  import { API } from './../utils/api.data'
  
  @Injectable()
  export class WorkService {
      public api: API = new API();
      private api_url: string = this.api.url+'works/latest/2/';
      constructor(
          private http: Http
      ){
          
      }
  
      public getLatestWorks(): Observable&lt;Work[]&gt;{
          return this.http.get(this.api_url)
                  .map((response:Response) =&gt; &lt;Work[]&gt;response.json()['data']);
              
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the component</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { Observable } from 'rxjs/Rx';
  import { WorkService } from './../work.service/work.service';
  import { Work } from './../shared/work';
  
  @Component({
    selector: 'latest_works',
    templateUrl: './latest.works.component.html',
    providers: [ WorkService ]
  })
  export class LatestWorksComponent implements OnInit { 
    public latest_works: Work[];
    public errorMessage: string;
  
    constructor(
      private workService: WorkService
    ){}
  
    private getLatestWorks(){
      this.workService.getLatestWorks()
          .subscribe(
            data =&gt; {
              this.latest_works = data
              console.log('data inside the subscribe ' + data);
              console.log('latest_works inside the subscribe ' + this.latest_works);
            },
            error =&gt; this.errorMessage = &lt;any&gt;error
          );
  
    }
   
    ngOnInit(){
      //console.log(this.latestworks());
      this.getLatestWorks();
      console.log('data ' + this.latest_works);
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the output to the classes.</p>
  
  <pre><code>[Log] data undefined
  [Log] Angular is running in the development mode. Call enableProdMode() to enable the production mode.
  [Log] data inside the subscribe [object Object],[object Object]
  [Log] latest_works inside the subscribe [object Object],[object Object]
  </code></pre>
  
  <p>Like I said I am new to angular and I have no idea what is truly going on right now. Any guidance would be great or any advice what I am doing wrong.</p>