購読値component.tsにundefinedを返しますが、値はここでservice.ts

Question

に存在している私のcomponent.tsファイルのGoogleスプレッドシートでの私の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(); 
     }); 
    } 
} 

解像度の

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); 
     }); 
    } 
} 

コンテンツの内容はサービスは値の配列を返し、コンソールに出力されますが、コンポーネントに登録すると未定義に戻ります（つまり、写真はコンソールで未定義に戻ります）。

getImages()は、Googleスプレッドシートからデータを取得するAPIを呼び出します。

portfolioList変数に写真を割り当てようとしたとき、atomは次のエラー"Type 'void' is not assignable to type 'string[]' "を強調表示します。写真は変数に割り当てることができませんが、私はこの問題を回避するために頭を抱えているように見えます。

ご意見やご指摘をいただければ幸いです。

Answer 1

あなたは

アロー機能は "簡潔な身体"

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

012のいずれかを有することができる

/* 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"); 

     } 

編集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(); 
      }); 
     } 

にしても良い結果を返す必要があります

または通常の「ブロック体」。

var fun = (x,y) => { return x + y;}; // In a block body, you must use an explicit return statement. 

あなたの関数は "ブロックボディ"なので、明示的なreturn文を使用する必要があります。