Angular2 Http Неопределенная ошибка

Question

Я пытаюсь сделать запрос на получение с помощью модуля Http в Angular2 (угловой 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: "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 до его разрешения. Либо использовать ЭЛВИС-оператор {{ contact?._id }} или показать блок условно:

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

Answer 2

Угловое пытается связать перед данными прибыли.

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

должно работать.

Answer 3

вы пытаетесь получить доступ contact объект whihc является неопределенным/нулевым до загрузки шаблона т.е. ваш объект не загружен должным образом во время шаблона нагрузки. так, чтобы избежать этого, вы должны использовать оператор elvis как следующий

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

с помощью elvis оператора angualr не будет бросать какие-либо ошибки, если ваш contact объект не имеет значения с именем name или id. всякий раз, когда ваша привязка правильно загружается до contact Объект угловой будет отражать изменения в шаблоне.

попробуйте этот, безусловно, сработает для вас.

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