angular2サービスでapiからデータを取得する際に問題が発生しました

Question

こんにちは、Angular-cliでプロジェクトを作成しました.Expressを使用してAPIルートをローカルに配信しています。私は角クライアントがエクスプレスサーバに到達できるようにプロキシ設定をしています。

私の問題は、APIルートからデータを取得し、それを私のビューに渡すことです。私は私のサービスで自分のデータを追跡して、私の観測対象がデータオブジェクトをうまく要求/受信しているのを見ることができます。また、モックデータを使用して、ビュー/コンポーネントがデータを正しく表示していることを確認しました。

ObservableからSubscribeへのHTTPリクエストの転送に役立つ情報がありますか？私のプロジェクトはエラーを表示しておらず、私は観察可能/購読中に自分のアプリをテストする方法が不明です。

私は別のプロジェクトでほぼ同じ設定をしています（このプロジェクトが要求してURLを表現しているローカルJSONファイルに対してHTTP要求が行われているという唯一の違いがあります）。

ここに私のコードです。ここ

サービス

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

export interface Session { 
    title: string, 
    date: string, 
    description: string, 
    imageUrl: string, 
    thumbImageUrl: string, 
    audioUrl: string, 
    tracklist: [{ 
    title: string, 
    artist: string 
    }] 
} 

@Injectable() 
export class DashboardService { 
    private sessionsUrl = 'api/sessions'; 

    constructor(private http: Http) { } 

    getSessions(): Observable<Session[]> { 
    return this.http.get(this.sessionsUrl) 
     .map(this.extractData) 
     .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
    console.log(res.json()); // THIS SHOWS THAT THE JSON OBJECT IS BEING RETURNED 
    let body = res.json(); 
    return body.project; 
    } 

    private handleError(error: Response | any) { 
    let errMsg: string; 
    if (error instanceof Response) { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
    } 
} 

コンポーネント

import { Component, OnInit } from '@angular/core'; 
import { Session, DashboardService } from '../dashboard.service'; 

@Component({ 
    selector: 'sessions-display', 
    templateUrl: './sessions-display.component.html', 
    styleUrls: ['./sessions-display.component.scss'] 
}) 
export class SessionsDisplayComponent implements OnInit { 
    sessions: Session[] = []; 
    errorMessage: string; 

    constructor(private dashboardService: DashboardService) { } 

    ngOnInit() { 
     this.getSessions(); 
    } 

    getSessions() { 
     this.dashboardService.getSessions() 
     .subscribe(
     sessions => this.sessions = sessions, 
     error => this.errorMessage = <any>error); 
    } 
} 

はRESオブジェクトを示すにconsole.logの画像です。

Answer 1

問題は、私が作ったタイプミスでした。 return body.project;はreturn body.sessions;