각도 2 서비스의 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); 
    } 
} 

은 입술 오브젝트 나타내는 CONSOLE.LOG의 이미지이다.

Answer 1

문제는 내가 만든 오타했다. return body.project;은 return body.sessions;