角度サービスの約束は最初に定義されていません

Question

今日私は角度2で始まり、私は解決できないエラーに遭遇しました。

私はモックファイルからデータをロードしている '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

opdracht.component.html 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(); 
    } 
} 

<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> 

Answer 1

角度が評価された場合に結合が、非同期の値がまだ到着していないエラーを回避するために、安全なナビゲーション演算子を使用します。

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