麻煩來自API的角2服務

嗨檢索數據我已經建立了一個項目了角CLI和我用快遞在本地提供API路線。我有一個代理設置，所以角度客戶端可以到達快速服務器。麻煩來自API的角2服務

我在從我的API路線檢索數據並將它傳遞給我的看法的問題。我在我的服務中跟蹤了我的數據，可以看到我的observable正在請求/接收數據對象。我也使用模擬數據，並看到我的視圖/組件正確顯示數據。

有我丟失的東西，以幫助從可觀測的HTTP請求轉移到訂閱？我的項目沒有顯示任何錯誤，我不確定如何在可觀察/訂閱內測試我的應用程序。

我有另一個項目幾乎相同的設置（即HTTP請求，唯一的區別是被到該項目要求它通過本地JSON文件，並明確提出URL）和項目工作正常。

這是我的代碼。

服務

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的圖像。

來源

2016-12-01 Jleibham

你確定對json的解析響應具有**項目**字段嗎？我的意思是，身體應該是一個會話序列號？ – Fals

對不起，我不太明白你的意思。 – Jleibham

知道了，該響應看起來是與對象和會話陣列。所以我相信它正確地返回。我將console.log與另一個正在工作的項目進行了比較，兩者的格式都是相同的。 – Jleibham

問題是一個錯字我做了。 return body.project;應該是return body.sessions;

來源

2016-12-01 21:34:08 Jleibham

這就是我說的:) – Fals

哈我知道，由於某種原因，它一直在我的頭上，直到我發現我自己的錯字。謝謝你的幫助！ – Jleibham

麻煩來自API的角2服務

回答

相關問題