Angular2 http 未定义错误

Question

我正在尝试使用 Angular2 中的 Http 模块（角度 2.0.0-beta.0 和打字稿 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: "[e-mail]", number: "435345"}

测试1.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":"[e-mail]","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":"[e-mail]","number":"435345"},{"_id":"56a63059b2cb5f4b10efaf9a","name":"Jan Janssen","email":"[e-mail]","number":"642"},{"_id":"56a6307bb2cb5f4b10efaf9b","name":"Gerard de Boer","email":"[e-mail]","number":"1234"},{"_id":"56abe853211b52a441f6c45f","name":"Bjorn Borg","email":"[e-mail]","number":"123"},{"_id":"56abe8da211b52a441f6c460","name":"Hans Dobbelsteen","email":"[e-mail]","number":"752"},{"_id":"56abe8fe211b52a441f6c461","name":"Marco van Basten","email":"[e-mail]","number":"961"}]

Answer 1

您正在尝试在解析对象之前使用它contact对象。要么使用猫王运算符{{ contact?._id }}要么有条件地显示块：

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

Answer 2

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

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

通过使用elvis运算符 Anguarr 不会抛出任何错误，如果您的contact对象没有名为 name 或 id 的值。每当绑定正确加载到contact对象角度都会引用对模板的更改。

试试这个肯定适合你。

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

Answer 3

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

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

应该工作。