角2 - サービスをインシデントするときの未処理の約束

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"] 
    }, 
}; 

サービスがなければ、すべてうまく行きます。クライアントの値がundefinedあるclient.id式を、評価しようとしているため、ビューの初期変化検出ダニの

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

：ここではアプリを起動しようとすると、私は取得エラーです。 getclientメソッドの約束事がまだ解決されていないためです。

あなたがclient?.idのようなエルビス演算子を使用して、

マークアップ

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