title: angular 5 consoling http toPromise() request returns undefined
body: <p>I am calling an api endpoint in angular 5 using Http import to populate a select dropdown but I am getting undefined when i log it to the console and the dropdown does not populate with any data...its meant to be item categorys.</p>
  
  <p>item-category.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers, RequestOptions } from '@angular/http';
  import {Router} from '@angular/router';
  import { Globals } from '../shared/api';
  import { of } from 'rxjs/observable/of';
  import 'rxjs/add/operator/toPromise';
  declare var $: any;
  
  @Injectable()
  export class ItemCategoryService{
      private categoryUrl = this.globals.CATEGORYS_URL;
      constructor(private http: Http, private globals: Globals,  private router:Router) { }
  
  fetchCategories(){
      let v = this.page_header();
      return this.http.get(this.categoryURL, v)
          .toPromise()
          .then(response =&gt; response.json())
          .catch(this.handleError);
      };
  }
  </code></pre>
  
  <p>itemCategory.component.ts</p>
  
  <pre><code>fetchCategorys(){
      this.categorySrv.fetchCategories().then(response =&gt;this.categorys = response.results  )
      .catch(error=&gt; this.error = error )
      console.log(this.categorys);   // &lt;== undefined
  }
  </code></pre>
  
  <p>itemCategory.component.html</p>
  
  <pre><code>&lt;select class="form-control" [(ngModel)]="product.category"[formControl]="productForm.controls['productCategory']" require&gt;
      &lt;option *ngFor="let item of categorys" [value]="item.slug"&gt;{{item.name}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This is what I have but undefined is what i get in the console and the dropdown has nothing from the api, inspecting shows nothing also...what could I have gotten wrong?</p>