1
Angular 2 HTTP GETリクエストを使用して、特定のノードのファイル名のリストで応答するNode/Expressバックエンドに接続しようとしていますフォルダにfs.readdirメソッドを使用します。Angular 2 HTTP GET to Nodeバックエンドでディレクトリ内のファイル名のリストを取得する
Iは、サービスとして角度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);
}
}
を、次いで成分からこのサービスを呼び出し：
ngOnInit() {
this.photoService.getPhotos()
.subscribe(
photos => this.fileList = photos,
error => this.errorMessage = <any>error);
}
これは、ノードのバックエンドである（Expressはごとに設定して規則）：
//Photo Service
app.get('/api/photos', function(req, res) {
fs.readdir('./uploads', function(error, files) {
if (error) {
throw error;
}
else {
res.end(files);
}
});
});
見られるように、HTTPリクエストがhttp://localhost:3000/api/photosにGETメソッドを呼び出し、ノードのバックエンドはその要求を受け取り、 'uploads'フォルダにファイル名を持つ文字列の配列を返すことになっています。
しかし、動作していないようです。私は、Node APIが応答を送信する形式と、Angularがサービスで使用するObservable型でどのように機能するのかと混同していると思います。