Угловое обещание обслуживания сначала не определено

Question

Сегодня я начал с Angular 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 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> 

Answer 1

Использование безопасной навигации оператора, чтобы избежать ошибок при Угловая оценивает связывания, но асинхронные значения еще не пришли:

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