Angular 2 - Unhandled Promise при инъекции услуги

Question

Я попытался запустить проект из официального учебника, и у меня возникли проблемы с инъекционными услугами в моем приложении Angular2. все идет нормально, пока я не добавлю сервис. Вот файлы:

app.component.ts

import { Component, OnInit } from '@angular/core'; 

import { client } from './client/client'; 
import { clientService } from './client/client.service'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <nav> 
     <h1>{{title}}</h1> 
     <h2>client n° {{client.id}}</h2> 
    </nav> 
    <client-detail [client]="client"></client-detail> 
    `, 
    providers: [clientService] 
}) 

export class AppComponent implements OnInit { 
    title = "client gendarmerie"; 
    client: client; 

    constructor(private clientService: clientService) { } 

    getclient(): void { 
     this.clientService.getclient().then(client_eg => this.client = client_eg); 
    } 
    ngOnInit(): void { 
     this.getclient(); 
    } 
} 

сервис/client.service

import { Injectable } from '@angular/core'; 

import { client } from './client'; 
import { client_EG } from './mock-client'; 

@Injectable() 
export class clientService { 
    getclient(): Promise<client> { 
     return Promise.resolve(client_EG); 
    } 
} 

клиент/макет клиент

import { client } from './client'; 

export const client_EG: client = { 
    id:parseInt('10243'), 
    contact: { 
     phone: parseInt('0606060606'), 
     access: ["Localisation", "chat", "picture"] 
    }, 
}; 

Без обслуживания все будет хорошо. Здесь ошибка я получаю при попытке запуска приложения:

core.umd.js:3462 EXCEPTION: Error in ./AppComponent class AppComponent 
- inline template:3:12 caused by: Cannot read property 'id' of undefinedErrorHandler.handleError @ core.umd.js:3462(anonymous function) @ core.umd.js:6860ZoneDelegate.invoke @ zone.js:203NgZoneImpl.inner.inner.fork.onInvoke @ core.umd.js:6242ZoneDelegate.invoke @ zone.js:202Zone.run @ zone.js:96(anonymous function) @ zone.js:462ZoneDelegate.invokeTask @ zone.js:236NgZoneImpl.inner.inner.fork.onInvokeTask @ core.umd.js:6233ZoneDelegate.invokeTask @ zone.js:235Zone.runTask @ zone.js:136drainMicroTaskQueue @ zone.js:368ZoneTask.invoke @ zone.js:308 core.umd.js:3464 ORIGINAL EXCEPTION: Cannot read property 'id' of undefined 

Answer 1

Из-за начальным клещ обнаружения изменения в целях он пытается оценить client.id выражения, где значение клиента undefined. Потому что обещание для метода getclient еще не разрешилось.

Вы можете использовать Элвис Оператора как client?.id и затем ngIf директиву, чтобы скрыть client-detail Компонента client объект получает населенную

Markup

<nav> 
    <h1>{{title}}</h1> 
    <h2>client n° {{client?.id}}</h2> 
</nav> 
<client-detail *ngIf="client" [client]="client"></client-detail>