角2は特定のオブジェクトを取得できません

Question

私は簡単なAPIをExpressに書いてMongoDBの助けを借りて、私のAngular 2が特定のオブジェクトを取得できないことを除いてすべて正常に動作します。私はオブジェクトのリストにアクセスすることができますが、私がidでオブジェクトを取得しようとすると、それは私にエラーORIGINAL EXCEPTION: TypeError: Cannot read property 'name' of undefinedを返します。つまり、彼はそれを得ることができません。私は問題はのMongoDBのプロパティは数字ではありませんが、私はそのオブジェクトを得ることができるはずだと信じています。

以下の私のコード：

goal.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 

import { 
    Goal , 
    GoalService 
} from '../shared/index'; 

@Component({ 
    selector: 'my-goal', 
    moduleId: module.id, 
    templateUrl: 'goal.component.html', 
    styleUrls: ['goal.component.css'], 
    directives: [GoalComponent] 
}) 

export class GoalComponent { 
    goal: Goal; 
    error: any; 
    private sub: any; 

    constructor(
    private route: ActivatedRoute, 
    private router: Router, 
    private goalService: GoalService) { 
    } 

    ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
     let id = +params['id']; 
     this.goalService.getGoal(id).then(goal => this.goal = goal); 
    }); 
    } 

    ngOnDestroy() { 
    this.sub.unsubscribe(); 
    } 

} 

goal.model.ts

export class Goal { 
    id: number; 
    name: string; 
    finish_date: Date; 
} 

goal.service.ts

import { Injectable } from '@angular/core'; 
import { Headers, Http, Response } from '@angular/http'; 

import '../../rxjs-operators'; 

import { Goal } from './goal.model'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class GoalService { 

    private goalsUrl = 'http://localhost:8081/api/goals'; 

    constructor(private http: Http) { } 

    getGoals(): Promise<Goal[]> { 
    return this.http.get(this.goalsUrl) 
       .toPromise() 
       .then(this.extractData) 
       .catch(this.handleError); 
    } 

    getGoal(id: number) { 
    return this.getGoals() 
       .then(goals => goals.filter(goal => goal.id === id)[0]); 
    } 

    private extractData(res: Response) { 
    let body = res.json(); 
    return body || { }; 
    } 

    private handleError (error: any) { 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
    } 

} 

idを文字列に変換して_idに変更しようとしましたが、違いはありません。だから、別のものに問題があるかもしれませんが、idプロパティがここで壊れているようです。

Answer 1

特定の要素のデータが非同期にロードされるため、問題はテンプレート内にあると思います。

Elvis演算子を使用できます。このようなもの：

{{goal?.name}}