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/

我被困了很长时间，直到我开始剖析我的＃34; mapBootcamps＆＃34;。我发现的是＆＃34; .results＆＃34;以下行的一部分：＆＃34; return response.json（）。results.map（toBootcamp）＆＃34;返回值undefined。因此，当＆＃34; .map（toBootcamp）＆＃34;方法被调用，它抛出错误＆＃34;无法读取属性＆＃39; map＆＃39;未定义＆＃34;。

要解决问题，我只需删除＆＃34; .results＆＃34;从行＆＃34;返回response.json（）。results.map（toBootcamp）＆＃34;它有效！

希望有所帮助！

Answer 2

您的问题似乎来自您的API。

在mapBootcamps中，您评论说每个API响应都有一个results属性，但有时它似乎没有。

您的console.log显示您有array object，因此结果不存在，只有null。

如果您将response.json().results.map(toBootcamp)更改为response.json()[0].results.map(toBootcamp)它将会正常工作，但我不认为您必须做的事情，您应该创建一个方法来处理数据作为数组，或将API的返回格式更改为对象。

Angular2 Map“无法读取未定义的属性'map'

2 个答案: