订阅值 returns 未在 component.ts 中定义，但值存在于 service.ts 中

Question

这是我的 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);
      });
  }
}

以及我的 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 in google sheets service returns 一组值并在控制台上打印出来但是 returns 在我的组件中订阅时未定义（即照片 returns 未定义在控制台上）。

getImages() 调用 API 从 google 电子表格中检索数据。

当我尝试将照片分配给 portfolioList 变量时，atom 突出显示以下错误 "Type 'void' is not assignable to type 'string[]' "。这是有道理的，因为它们属于不同类型，照片无法分配给变量，但我似乎无法解决这个问题以及如何解决这个问题。

非常感谢任何建议或指示。

Answer 1

您应该 return 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();
          });
      }

更好

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

      }

编辑

箭头函数可以有一个 "concise body"

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

或通常的 "block body".

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

由于您的函数是 "block body"，因此您必须使用明确的 return 语句。

订阅值 returns 未在 component.ts 中定义，但值存在于 service.ts 中

subscribed value returns undefined in component.ts but value exists in service.ts

angular-services

google-sheets-api

angular