Angular 2 - 注入服務時未處理的諾言

我試過從官方教程開始一個項目，我在Angular2應用程序中注入服務時出現問題。一切都很好，直到我添加一項服務。以下是文件：Angular 2 - 注入服務時未處理的諾言

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

來源

2016-09-21 Ismail H

因爲視圖初始變化檢測剔它正試圖評估client.id表達，其中客戶價值爲undefined。因爲getclient方法的承諾尚未解決。

你可以使用Elvis操作符像client?.id，然後有ngIf指令隱藏client-detail組件到client對象被填充

標記

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

來源

2016-09-21 14:45:56

非常感謝，它的工作。爲什麼我必須使用它？不是已經存在的變量嗎？ –

@IsmaH否否在第一次更改檢測運行時不可用，在承諾解決其他CD運行時，它可用。 –

在這種情況下，爲什麼它在他們的教程中工作？ –

Angular 2 - 注入服務時未處理的諾言

回答

相關問題