从 Angular 2 服务上的 api 检索数据时遇到问题

Question

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

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

我是否缺少帮助将 HTTP 请求从 Observable 传输到订阅的东西？我的项目没有显示任何错误，我不确定如何在 observable/subscribe 中测试我的应用。

我在另一个项目上有几乎相同的设置（唯一的区别是 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);
    }
}

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

Answer 1

问题是我打错字了。 return body.project; 应该是 return body.sessions;