Angular2 map "Cannot read property ' map '未定义”

Question

所以我刚刚开始学习 Angular2，我试图获取数据库中的数据并将其显示在我的索引页上，但每次我尝试这样做时，我都会收到一条错误消息“无法读取未定义的属性‘映射’”并且我不知道为什么我一直在寻找几个小时。有人可以帮我吗？

import { Component } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';
import { Bootcamp } from './Bootcamp';

const BOOTCAMP: Bootcamp[] = [];

@Injectable()

export class Bootcamptest {
    private baseUrl: string = 'http://localhost:54220/Bootcampdata';

    constructor(private http: Http) { }

    getAll(): Observable<Bootcamp[]> {
        let bootcamp$ = this.http
            .get(`${this.baseUrl}/GetAlleBootcamps`, { headers: this.getHeaders() })
            .map(mapBootcamps)
            .catch(handleError);

        return bootcamp$;
    }

    private getHeaders() {
        let headers = new Headers();
        headers.append('Accept', 'application/json');  
        return headers;
    }
}

function mapBootcamps(response: Response): Bootcamp[] {
    // uncomment to simulate error:
    // throw new Error('ups! Force choke!');

    // The response of the API has a results
    // property with the actual results

    return response.json().results.map(toBootcamp)
} 

function toBootcamp(r: any): Bootcamp {
    let bootcamp = <Bootcamp>({
        id: extractId(r),
        naam: r.name,
        description: r.description,
        begindatum: r.begindatum,
        einddatum: r.einddatum
    });

    console.log('Parsed bootcamp:', bootcamp);
    return bootcamp;
}

// to avoid breaking the rest of our app
// I extract the id from the person url
function extractId(bootcampData: any) {
    let extractedId = bootcampData.url.replace('http://localhost:54220/Bootcampdata/Getallebootcamps', '').replace('/', '');
    return parseInt(extractedId);
}

function mapBootcamp(response: Response): Bootcamp {
    // toBootcamp looks just like in the previous example
    return toBootcamp(response.json());
}

// this could also be a private method of the component class
function handleError(error: any) {
    // log error
    // could be something more sofisticated
    let errorMsg = error.message || `Error met het laden van data!`
    console.error(errorMsg);

    // throw an application level error
    return Observable.throw(errorMsg);
}

组件类

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

@Component({
    selector: 'my-bootcamptest',
    template: `
  <section>
    <section *ngIf="isLoading && !errorMessage">
    Loading our hyperdrives!!! Retrieving data...
    </section>
      <ul>
        <!-- this is the new syntax for ng-repeat -->
        <li *ngFor="let person of people">
            <a>
          {{bootcamp.naam}}
          </a>
        </li>
      </ul>
      <section *ngIf="errorMessage">
        {{errorMessage}}
      </section>
  </section>
  `
})
export class Bootcamplistcomponent implements OnInit {
    bootcamp: Bootcamp[] = [];
    errorMessage: string = '';
    isLoading: boolean = true;

    constructor(private bootcamptest: Bootcamptest) { }

    ngOnInit() {
        this.bootcamptest
            .getAll()
            .subscribe(
         /* happy path */ p => this.bootcamp = p,
         /* error path */ e => this.errorMessage = e,
         /* onComplete */() => this.isLoading = false);
    }
}

Answer 1

我知道这已经很旧了，但我自己也遇到了这个问题。我假设您还使用了以下教程:

https://www.barbarianmeetscoding.com/blog/2016/04/02/getting-started-with-angular-2-step-by-step-6-consuming-real-data-with-http/

我被困了很长一段时间，直到我开始剖析我的“mapBootcamps”。我发现以下行的“.results”部分:“return response.json().results.map(toBootcamp)”返回未定义的值。因此，当调用“.map(toBootcamp)”方法时，会抛出错误“无法读取未定义的属性‘map’”。

为了解决这个问题，我只是从“return response.json().results.map(toBootcamp)”行中删除了“.results”，它就成功了!

希望有帮助!