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>

應該管用。