角度服務承諾首先是undefined

今天我開始使用Angular 2，並且遇到了一個我無法解決的錯誤。角度服務承諾首先是undefined

我有一個'opdracht'服務，它正在從模擬文件中加載數據。 opdracht組件在家庭組件中是4次。第一個是未定義的，最後3個正在顯示。

我認爲承諾有問題。但我無法弄清楚什麼。代碼和控制檯錯誤在這裏。

我在做什麼錯？

感謝，

馬騰

控制檯錯誤

main.bundle.js:41251EXCEPTION: Uncaught (in promise): Error: Error in ./OpdrachtComponent class OpdrachtComponent - inline template:0:3 caused by: Cannot read property 'name' of undefined

opdracht.ts

export interface Opdracht { 
    id: number; 
    name: string; 
}

opdracht en.mock.ts

import { Opdracht } from "./opdracht"; 

export const OPDRACHTEN: Opdracht[] = [ 
    { 
    id: 1, 
    name: "Apple iDrive" 
    }, 
    { 
    id: 2, 
    name: "Lunchroom Bakker" 
    }, 
    { 
    id: 3, 
    name: "Augmented Albert" 
    }, 
    { 
    id: 4, 
    name: "Pecha Kucha" 
} 
];

opdrachten.service.ts

import {Injectable} from "@angular/core"; 
import {Opdracht} from "./opdracht"; 
import {OPDRACHTEN} from "./opdrachten.mock"; 

@Injectable() 
export class OpdrachtenService { 

    getOpdracht(id: any): Promise<Opdracht> { 
    return Promise.resolve(OPDRACHTEN[id]); 
    } 
}

opdracht.component.ts

import {Component, OnInit, Input} from "@angular/core"; 
import {OpdrachtenService} from "../services/opdrachten/opdrachten.service"; 
import {Opdracht} from "../services/opdrachten/opdracht"; 

@Component({ 
    selector: 'app-opdracht', 
    templateUrl: './opdracht.component.html', 
    styleUrls: ['./opdracht.component.scss'], 
    providers: [OpdrachtenService] 
}) 
export class OpdrachtComponent implements OnInit { 

    @Input() private id: any; 

    protected opdracht: Opdracht; 

    constructor(private opdrachtenService: OpdrachtenService) { } 

    getOpdracht(): void { 
    this.opdrachtenService.getOpdracht(this.id) 
     .then((opdracht: Opdracht) => { 
     this.opdracht = opdracht 
     }) 
    ; 
    } 

    ngOnInit() { 
    this.getOpdracht(); 
    } 
}

opdracht.component.html

<p>{{ opdracht.name }}</p>

home.component.html

<app-header></app-header> 
<app-foto></app-foto> 
<app-ik></app-ik> 
<app-opdracht [id]="0"></app-opdracht> 
<app-opdracht [id]="1"></app-opdracht> 
<app-opdracht [id]="2"></app-opdracht> 
<app-opdracht [id]="3"></app-opdracht> 
<app-footer></app-footer>

來源

2016-10-08 maartenpaauw

要調用opdracht id 0，但你沒有它在你的模擬文件。 – Sefa

輸入名稱'id'有點令人誤解。我用它作爲索引。 – maartenpaauw

使用安全導航操作，以避免錯誤，當角計算結合，但異步值還沒有到達：

<p>{{ opdracht?.name }}</p>

來源

2016-10-08 16:28:46

謝謝。這解決了問題！ – maartenpaauw

很高興聽到:) –

角度服務承諾首先是undefined

回答

相關問題