Angular 2 Service Observable 返回未定义

Question

我最近开始使用 Angular 并尝试完成从数据库中获取一些资源、对它们进行排序并显示它们的简单任务。

但是组件接收到 undefined 并且无法排序。

我看过以下主题

angular2 observable, getting undefined in component

angular2 services returns undefined

angular2 observable, getting undefined in component

我从 angular.io 开始 Google 的教程，并根据我的需要扩展/修改了代码

并尝试了以下方法：

服务：

import { Album } from './album'; 
import { ALBUMS } from './mock-albums';
import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

@Injectable()
export class AlbumService {

  private albumURL = '/api/albums';

  constructor (private http: Http) { }

  getAlbums(): Promise<Album[]> {

    return this.http.get(this.albumURL)
            .toPromise()
            .then(response => {response.json().data as Album[]; 
                   console.log(response)})
            .catch(this.handleError);
  }

还按照其他线程的建议在 getAlbums() 的主体中尝试了以下 3 个

  return this.http.get(this.albumURL)
          .map(response => response.json().data as Album[])
          .toPromise();

   return this.http.get(this.albumURL)
        .map(response => {response.json().data as Album[]) 

  return this.http.get(this.albumURL)
        .map(response => { return response.json().data as Album[]}) 

组件：

import { Component, OnInit } from '@angular/core';

import { Album } from './album';
import { AlbumService } from './album.service';
import { Subscription } from 'rxjs/Rx';

@Component({
  selector: 'album-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: [ 'dashboard.component.css' ]
 })  

export class DashboardComponent implements OnInit {

 albums: Album[] = [];

 constructor(private albumService: AlbumService) { };

 ngOnInit(): void {

   this.albumService.getAlbums()
      .then(result => this.albums = result.sort((function(a,b){
         return (a.artist > b.artist) ? 1 : ((b.artist > a.artist) ? -1 : 0);
       }))) 
 }

 .... the rest of the class continues

还在组件中尝试了以下操作：

this.albumService.getAlbums()
   .subscribe(result => this.albums = result.sort((function(a,b){
    return (a.artist > b.artist) ? 1 : ((b.artist > a.artist) ? -1 : 0);
})))

我收到以下错误并得出结论，由于某种原因，服务在 Promise 解决之前返回，但我可能错了

无法读取未定义的属性类型

需要注意的重要一点是上面服务代码上的 console.log(response) 打印出来自服务器的正确响应。所以数据确实到达了正确的角度服务，但服务和组件之间发生了一些事情

Answer 1

移除服务内的强制转换，当它失败时你将无法访问

return this.http.get(this.albumURL)
            .toPromise()
            .then(response => {response.json(); 
                   console.log(response)})
            .catch(this.handleError);
  }