在角度2服务上从api检索数据时遇到问题

时间:2016-12-01 19:44:48

标签: angular angular2-services

您好我已经使用Angular-cli构建了一个项目,我正在使用express来本地提供API路由。我有一个代理设置,因此角度客户端可以到达快速服务器。

我遇到的问题是从我的API路由中检索数据并将其传递给我的视图。我在我的服务中跟踪了我的数据,可以看到我的observable正在请求/接收数据对象。我还使用了模拟数据,并且看到我的视图/组件正确显示数据。

我是否缺少帮助HTTP请求从Observable转移到Subscribe的东西?我的项目没有显示任何错误,我不确定如何在observable / subscribe中测试我的应用程序。

我在另一个项目上有一个几乎完全相同的设置(唯一的区别是HTTP请求是针对本项目请求通过并表达URL的本地JSON文件),并且该项目工作正常。

这是我的代码。

服务

-- import Control.Arrow ((&&&))
(f &&& g) x = (f x, g x)

-- import Control.Category ((>>>))
(f >>> g) = g . f

histogram :: String -> [(Char, Int)]
histogram
  = sort                             -- [Char]
  >>> group                          -- [[Char]]
  >>> map (head &&& length)          -- [(Char, Int)]
  >>> sortBy (flip (comparing snd))

组件

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);
  }
}

这是显示res对象的console.log的图像。

enter image description here

1 个答案:

答案 0 :(得分:0)

问题是我犯了一个错字。 return body.project;应为return body.sessions;