Javascript Angular 2 HTTP访问节点后端以获取目录中的文件名列表

我尝试使用Angular 2 HTTP GET请求来简单地连接到Node/Express后端，该后端使用fs.readdir方法以特定文件夹中的文件名列表进行响应

我将Angular 2请求设置为服务：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import './rxjs-operators';

@Injectable()
export class PhotoService {

  constructor (private http: Http) {}

  private photosUrl = '/api/photos';  // URL to web API

  getPhotos() : Observable<string[]> {
    return this.http.get(this.photosUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
  }

  private handleError (error: any) {
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }
}

如图所示，HTTP请求调用GET方法，节点后端应该接收该请求，并发回一个字符串数组，其中包含“uploads”文件夹中的文件名

---

然而，它似乎不起作用。我想我对节点API发送响应的格式以及Angular在服务中使用的可观察类型的工作方式感到困惑。

我觉得Angular 2代码不错。但在节点后端，不应使用

res.end（）

发送数据（请参阅）。正确的将是

res.send（文件）

或在您的情况下

res.json（文件）也将设置右侧的
内容类型
标题

ngOnInit() {
    this.photoService.getPhotos()
                     .subscribe(
                        photos => this.fileList = photos,
                        error => this.errorMessage = <any>error);
}

//Photo Service
app.get('/api/photos', function(req, res) {
        fs.readdir('./uploads', function(error, files) {
          if (error) {
            throw error;
          }
          else {
            res.end(files);
          }
        });
});