Component class not getting data after calling Promise-based service method

Question

My Component class:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { I4PService } from '../shared/i4pservice.model';
import { I4PServiceService } from '../shared/i4pservice.service';

@Component({
  moduleId: module.id,
  selector: 'i4pservice-list',
  templateUrl: './i4pservice-list.component.html',
  styleUrls: ['./i4pservice-list.component.css']
})

export class I4PServiceListComponent implements OnInit {
  i4pservices: I4PService[];
  selectedService: I4PService;

  constructor(
    private i4pserviceService: I4PServiceService,
    private router: Router) {
    console.log('in the I4PServiceListComponent constructor....');
  }

  getI4PServices(): void {
      console.log('I4PServiceListComponent:getI4PServices()....');
      if (this.i4pserviceService) {
        console.log('Does the i4pserviceService exist? yes ');
      }

      console.log("what's returned from the service class? " + this.i4pserviceService.getI4PServices());

      this.i4pserviceService.getI4PServices()
        .then(i4pservices => {
          console.log('i4pservices: ' + i4pservices);
          this.i4pservices = i4pservices;
          console.log('this.i4pservices: ' + this.i4pservices);
        });

      if (this.i4pservices) {
        console.log('i4pservices fetched? yes ');
      }
    }
    ...
}

And here the corresponding service class:

import { Injectable }    from '@angular/core';
import { Headers, Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { I4PService } from './i4pservice.model';

@Injectable()
export class I4PServiceService {
    private headers = new Headers({'Content-Type': 'application/json'});
    private i4pservicesUrl = '/rest/servicecatalog/services'; // URL to web api
    
    constructor(private http: Http){}
    
    getI4PServices():Promise<I4PService[]>{
          console.log('in the getI4PServices method....');
        return this.http.get(this.i4pservicesUrl)
                   .toPromise()
                   .then(response => {
                       console.log('in the getI4PServices method....');
                       console.log(response);
                       console.log('response data I4PService: ' + response.json());
                       response.json() as I4PService[];                  
                   })
                   .catch(this.handleError);
     }
     ...
 }
    

The Console output looks like this:

core.umd.js:111 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
i4pservice-list.component.ts:20 in the I4PServiceListComponent constructor....
i4pservice-list.component.ts:24 I4PServiceListComponent:getI4PServices()....
i4pservice-list.component.ts:26 Does the i4pserviceService exist? yes 
i4pservice.service.ts:17 in the getI4PServices method....
i4pservice-list.component.ts:29 what's returned from the service class? [object Object]
i4pservice.service.ts:17 in the getI4PServices method....
i4pservice.service.ts:21 in the getI4PServices method....
i4pservice.service.ts:22 Response {_body: "[{"name":"xxx","id":"xxxx","tags":["xxx"],...}]", status: 200, ok: true, statusText: "OK", headers: Headers…}
i4pservice.service.ts:23 response data I4PService: [object Object],[object Object],[object Object],[object Object],[object Object]
i4pservice.service.ts:21 in the getI4PServices method....
i4pservice.service.ts:22 Response {_body: "[{"name":"xxx","id":"xxxx","tags":["xxx"],...}]", status: 200, ok: true, statusText: "OK", headers: Headers…}
i4pservice.service.ts:23 response data I4PService: [object Object],[object Object],[object Object],[object Object],[object Object]
i4pservice-list.component.ts:33 i4pservices: undefined
i4pservice-list.component.ts:35 this.i4pservices: undefined

Just do not understand the last two lines in the log: why is the data 'i4pservices' undefined? (why is it not fetched by calling the method in the service class? How can I fix this? Many thanks in advance! (I am using Anguar 2.4.1, and the relevant libraries are all latest releases.)

Answer 1

You are not returning any value from the .then() method in your promise.

Add a return statement to response.json() as I4PService[];

    getI4PServices():Promise<I4PService[]>{
          console.log('in the getI4PServices method....');
        return this.http.get(this.i4pservicesUrl)
                   .toPromise()
                   .then(response => {
                       console.log('in the getI4PServices method....');
                       console.log(response);
                       console.log('response data I4PService: ' + response.json());
                       return response.json() as I4PService[];                  
                   })
                   .catch(this.handleError);
     }
     ...
 }