Angular2 Http未定义错误

Question

我正在尝试使用Angular2（角度2.0.0-beta.0和打字稿1.7.5）中的Http模块发出get请求，但是我遇到了某种同步问题。 我将所有内容都放在一个.ts文件中，以使其更易于通信。

在打字稿中一切都可以正常编译，但是Chrome在控制台中显示以下错误：

EXCEPTION: TypeError: Cannot read property '_id' of undefined in [Id: {{contact._id}} Name: {{contact.name}} in Test@1:13]
ORIGINAL EXCEPTION: TypeError: Cannot read property '_id' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property '_id' of undefined
...
...
Object {_id: "5695e53d98ff94671ae22d55", name: "Piet Pannenkoek", email: "piet@gmail.com", number: "435345"}

test1.ts：

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx';

@Component({
    selector: 'my-app',
    template: `
        <div>Id: {{contact._id}} Name: {{contact.name}}</div>
    `,
    providers: [HTTP_PROVIDERS]
})

export class Test {

    public contact: Contact;

    constructor(private http: Http) {}

    ngAfterViewInit() {
        this.http.get('/api/contactlist/5695e53d98ff94671ae22d55')
            .map((res: Response) => res.json())
            .subscribe(res => {
                console.log(res);
                this.contact = res;
            });
    }
}

export class Contact {
    constructor (public _id: string, public name: string, public email: string, public number: string) {};
}

bootstrap(Test);

HTTP：//本地主机：3000 / API / contactlist / 5695e53d98ff94671ae22d55

{"_id":"5695e53d98ff94671ae22d55","name":"Piet Pannenkoek","email":"piet@gmail.com","number":"435345"}

奇怪的是另一个（略有不同）版本test2.ts没有给出任何错误：

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx';

@Component({
    selector: 'my-app',
    template: '<div *ngFor="#contact of contacts">Id: {{contact._id}} Name: {{contact.name}}</div>',
    providers: [HTTP_PROVIDERS]
})

export class Test {

    public contacts: Contact[] = [];

    constructor(private http: Http) {}

    ngAfterViewInit() {
        this.http.get('/api/contactlist')
            .map((res: Response) => res.json())
            .subscribe(res => {
                console.log(res);
                this.contacts = res;
            });
    }
}

export class Contact {
    constructor (public _id: string, public name: string, public email: string, public number: string) {};
}

bootstrap(Test);

HTTP：//本地主机：3000 / API / contactlist

[{"_id":"5695e53d98ff94671ae22d55","name":"Piet Pannenkoek","email":"piet@gmail.com","number":"435345"},{"_id":"56a63059b2cb5f4b10efaf9a","name":"Jan Janssen","email":"jan@email.com","number":"642"},{"_id":"56a6307bb2cb5f4b10efaf9b","name":"Gerard de Boer","email":"gerard@email.com","number":"1234"},{"_id":"56abe853211b52a441f6c45f","name":"Bjorn Borg","email":"bjorn@borg.com","number":"123"},{"_id":"56abe8da211b52a441f6c460","name":"Hans Dobbelsteen","email":"hans@email.com","number":"752"},{"_id":"56abe8fe211b52a441f6c461","name":"Marco van Basten","email":"marco@email.com","number":"961"}]

Answer 1

您正在尝试使用contact对象，但无法解决。 使用elvis-operator {{ contact?._id }}或有条件地显示块：

template: `
    <div *ngIf="contact">Id: {{contact._id}} Name: {{contact.name}}</div>
`,

Answer 2

您正在尝试访问contact对象，直到模板加载之前，该对象是未定义/为空，即在模板加载时您的对象尚未正确加载。 因此，为了避免这种情况，您必须使用如下所示的elvis运算符

{{contact?._id}} and {{contact?.name}}

如果您的contact对象没有名为name或id值，则使用elvis运算符angualr不会引发任何错误。 只要您的绑定加载正确以contact对象角度，就会反射对模板的更改。

试试这个肯定为您工作。

<div>Id: {{contact?._id}} Name: {{contact?.name}}</div>

Answer 3

Angular尝试在数据到达之前进行绑定。

<div>Id: {{contact?._id}} Name: {{contact?.name}}</div>

应该管用。