订阅值在 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();
});
}
}

Google 表格服务中的 res 返回一个值数组并在控制台上打印出来，但在"我的组件"中订阅时返回未定义(即照片在控制台上返回未定义(。

getImages()调用一个从谷歌电子表格中检索数据的API。

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

任何建议或指示将不胜感激。

Answer 1

您应该在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");
}

编辑

箭头函数可以具有"简洁正文"

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

或通常的"块体"。

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

由于您的函数是"块体"，因此必须使用显式 return 语句。