retourne valeur souscrits non définie dans component.ts mais la valeur existe dans service.ts

Question

Voici le contenu de mon dossier component.ts

import { Component, OnInit } from '@angular/core'; 
import { GoogleSheetsService } from '../shared/services/googlesheets.service'; 

@Component({ 
selector: 'home-component', 
templateUrl: './home.component.html', 
styleUrls: ['./home.component.scss'] 
}) 

export class HomeComponent implements OnInit { 

    apiPortfolioListEndPoint: string; 
    portfolioList: Array<string>; 

    constructor (
    private googleSheetsService: GoogleSheetsService 
) {} 

    ngOnInit() { 
    this.apiPortfolioListEndPoint = '/home/portfolio'; 
    this.getImagesFromSheets(this.apiPortfolioListEndPoint); 
    } 

    getImagesFromSheets(sheetName) { 
    this.googleSheetsService.getImages(sheetName) 
     .subscribe(photos => { 
     console.log(photos); 
     }); 
    } 
} 

et le contenu de mon dossier service.ts

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

@Injectable() 
export class GoogleSheetsService { 

    constructor(
    private http: Http 
) { } 

    getImages(sheetName) { 
    const apiServerEndPoint = '/api' + sheetName; 
    return this.http.get(apiServerEndPoint) 
     .map((res: Response) => { 
     console.log(res.json()); 
     res.json(); 
     }); 
    } 
} 

res dans les feuilles de Google service retourne un tableau de valeurs et est imprimé sur la console mais renvoie undefined lorsqu'il est abonné dans mon composant (ie les photos retournent undefined sur la console).

getImages() appelle une API qui récupère des données à partir de feuilles de calcul Google.

Lorsque j'ai essayé d'affecter des photos à la variable portfolioList, atome met en surbrillance l'erreur suivante "Type 'void' is not assignable to type 'string[]' ". cela a du sens, car ils sont de types différents, les photos ne peuvent pas être assignées à la variable mais je ne peux pas sembler m'en tenir à ce problème et comment je peux y remédier.

Toutes les suggestions ou directions sont grandement appréciées.

Answer 1

Vous devez retourner les résultats dans le map

getImages(sheetName) { 
     const apiServerEndPoint = '/api' + sheetName; 
     return this.http.get(apiServerEndPoint) 
      .map((res: Response) => { 
      console.log(res.json()); 
      /* You need to return the data here*/ 
      return res.json(); 
      }); 
     } 

Mieux encore

/* import these first*/ 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/observable/throw'; 

     getImages(sheetName) { 
      const apiServerEndPoint = '/api' + sheetName; 
      return this.http.get(apiServerEndPoint) 
       .map(this.extractData) 
       .catch(this.catchError); 
      } 

     private extractData(res: Response) { 
     return res.json(); 
     } 

     private catchError(error: Response | any) { 
     return Observable.throw(error.json().error || "Server Error"); 

     } 

Modifier

fonctions fléchées peuvent avoir soit un "corps concis"

var fun = z => z + z; //In a concise body, only an expression is needed,and an implicit return is attached. 

ou le "corps de bloc" habituel. Puisque votre fonction est "corps du bloc", vous devez utiliser une instruction return explicite.