Angular2 Http未定义错误

Question

我正在尝试使用 Angular2 中的 Http 模块（angular 2.0.0-beta.0 和 typescript 1.7.5）发出获取请求，但我遇到了某种同步问题。我将所有内容都放在一个 .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://localhost: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://localhost: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>

应该可以。