Soy nuevo en Angular2 y en este momento estoy tratando de crear una aplicación simple que muestre una lista de objetos. Desde allí, quiero hacer clic en una vista detallada de un objeto. Cuando lo hago y quiero acceder a una de las propiedades de los objetos, aparece una excepción:

cannot read property 'id' of undefined

Este es el código que estoy usando:

mi servicio se ve así (basado en el tutorial que se encuentra en el sitio angular):

 getQuotation(id: number): Observable<Quotation> { return this.http.get(this.quotationUrl) .map(this.extractData) .catch(this.handleError); }; private extractData(res: Response) { return res.json(); } private handleError (error: Response | any) { let errMsg: string; if (error instanceof Response) { const body = error.json() || ''; const err = body.error || JSON.stringify(body); errMsg = `${error.status} - ${error.statusText || ''} ${err}`; } else { errMsg = error.message ? error.message : error.toString(); } return Observable.throw(errMsg); }

La llamada http.get apunta a un archivo json estático que se ve así:

 { "id": 1, "name": "string", "email": "string", "date": "string", "quotationStatus": "string", "read": true }

y parece cargado correctamente si escribo res.json() en la consola.

El componente de cotización:

 import { Component, OnInit } from '@angular/core'; import {QuotationService} from "./quotation.service"; @Component({ templateUrl: './quotation.component.html', styleUrls: ['./quotation.component.css'], providers: [QuotationService] }) export class QuotationComponent implements OnInit { constructor(private quotationService : QuotationService) { } quotation : Quotation; errorMessage : string; ngOnInit() { this.quotationService.getQuotation(1) .subscribe( quotation => this.quotation = quotation, error => this.errorMessage = <any>error, ); } } export class Quotation { id: number; name: string; email: string; date: string; quotationStatus: string; read: boolean; }

Y la plantilla queda así:

 <div> <div class="row"> <div class="columns small-12"> <h1>Offerte # {{ quotation.id }}</h1> </div> </div> ... </div>

Si omito la parte {{ quote.id }}, la plantilla se carga sin ningún error.

Cualquier ayuda sería apreciada ya que esto ya está tomando demasiado tiempo para solucionarlo y estoy empezando a frustrarme :).

EDITAR

Para ser claro. No quiero ocultar la excepción, quiero que se cargue la cotización y tengo que entender por qué no está ahora.