尝试枚举可观察对象时出错：对象不支持属性或方法“forEach”答案

【问题标题】：Error when attempting to enumerate an observable: Object doesn't support property or method 'forEach'尝试枚举可观察对象时出错：对象不支持属性或方法“forEach”
【发布时间】：2016-05-16 19:06:43
【问题描述】：

我遵循此处找到的模式（请参阅 hero.service.ts）： https://angular.io/docs/ts/latest/guide/server-communication.html

可在此处找到的可观察文档： https://xgrommx.github.io/rx-book/content/getting_started_with_rxjs/creating_and_querying_observable_sequences/creating_and_subscribing_to_simple_observable_sequences.html

我的代码在 ApplicationsIndex.ts 中显示的行中出现错误。错误消息是“对象不支持属性或方法'forEach'”。我的 api 服务器被击中并正确返回数据。当查看 Typescript intellisense 时，它会出现 this.Applications （以及 subscribe() 函数中的“x”）是一个带有 find、forEach 等方法的集合对象。看来 rxjs 加载正确，否则 .map 将无法正常工作。我做错了什么？

sysemjs.config.json

var map = {
    'app': 'app', // 'dist',
    'rxjs': 'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular': 'node_modules/@angular'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
};

main.ts

import 'rxjs/Rx';
//...

ApplicationsIndex.ts

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

import { PermissionsService} from '../services/permissionsService';
import { Application } from '../model/Application';

@Component({
    selector: 'app-applications-index',
    templateUrl: './app/permissions/applicationsIndex.html'
})
export class ApplicationsIndex implements OnInit
{
    public Title: string;
    public Applications: Application[];

    constructor(private permissionsService: PermissionsService)
    {
        this.Title = 'This is rolesIndex';
    }

    ngOnInit()
    {
        this.permissionsService.GetApplications().subscribe(x => {
            this.Applications = x;
            this.Applications.forEach((app, index) => { // ****** ERROR HERE  ******
                alert(app.Name);
            });
            alert('get apps done');
        });       
    }
}

PermissionsService.ts

GetApplications(): Observable<Application[]> {
    let url = this.serviceURL + 'Permissions/GetApplications';
    return this.http.get(url)
        .map(this.extractData)
        .catch(this.handleError);
}


private extractData(res: Response) {
    if (res.status < 200 || res.status >= 300) {
        throw new Error('Bad response status: ' + res.status);
    }
    let body = res.json();
    return body.data || {};
}

private handleError(error: any) {
    let errorMsg = error.message || 'Server error';
    console.error(errorMsg);
    return Observable.throw(errorMsg);
}

【问题讨论】：

标签： typescript angular rxjs

【解决方案1】：

您的 extractData 方法中可能有问题

private extractData(res: Response) {
  if (res.status < 200 || res.status >= 300) {
    throw new Error('Bad response status: ' + res.status);
  }
  let body = res.json();
  return body || []; // <-----------
}

如果您在响应负载中直接收到一个数组，则无需使用body.data。否则你的代码看起来是正确的。

【讨论】：