Angular 角度2服务可观测返回未定义

我最近开始玩Angular，并试图实现从数据库中获取一些资源、对它们进行排序并显示它们的简单任务

但是，组件接收未定义的数据，无法排序

我已经研究了以下线程

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

组成部分：

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

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

无法读取未定义的属性排序

---

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

删除服务内部的铸造，当它失败时，您将无法访问

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

---

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

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

---

@Sajaeetharan谢谢你！我还无法得到您对工作的确切响应，但如果我从.map案例中删除该角色，它会起作用。你能不能更详细地解释一下为什么演员会打破这一点？它是否会在失败时返回一个空实例或其他东西？@Sajaeetharan谢谢！我还无法得到您对工作的确切响应，但如果我从.map案例中删除该角色，它会起作用。你能不能更详细地解释一下为什么演员会打破这一点？它是否在失败或其他情况下返回空实例？