例外：キャッチされていない（約束されています）：エラー原因：未定義の 'name'プロパティを読み取ることができません

Question

私はAngular2初心者です。私は（詳細/のために：IDのAPIビュー）camp.detail.component.htmlにこのコードを追加しようとすると、

{{campDetail.campground.name}} 

それは常に次のエラーメッセージ表示されます：

を

私は削除

{{campDetail.campground.name}} 

は、エラーメッセージがない、と私たちは、オブジェクトがコンソールに印刷されて見ることができます：

Iなかった多くの検索をして、できるだけ多くのソリューションを試してみましたが、まだこの問題を解決するためのいかなる適切な方法を見つけていません。 （例：Angular 2 router Error: Uncaught (in promise): TypeError: Cannot read property 'resolve' of undefined、Uncaught (in promise): Error: Cannot read property of undefined、Angular 2 Uncaught (in promise): TypeError: Cannot read property 'isActivated' of undefined、https://github.com/angular/angular/issues/8519）

この例外はどのように解決できますか？どんな提案も私にとって有益かつ有益なものになります。ほんとうにありがとう。

私のファイルは、以下の通りです：

campgrounds.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 
import { Campground } from "../models/campground"; 
import { Comment } from "../models/comment"; 

export class CampDetail { 
    campground: Campground; 
    comments: Comment[]; 
} 

@Injectable() 
export class CampgroundService { 
    private campgroundsUrl = 'api/campground'; 
    constructor(private http: Http) { } 

    getCamps(): Promise<Campground[]> { 
     return this.http.get(this.campgroundsUrl) 
      .toPromise() 
      .then(response => response.json()) 
      .catch(this.handleError); 
    } 

    getCamp(id: number): Promise<CampDetail> { 
     return this.http.get(this.campgroundsUrl + '/' + id) 
      .toPromise() 
      .then(response => response.json()) 
      .catch(this.handleError); 
    } 

    private handleError(error: any): Promise<any> { 
     console.error('An error occurred', error); 
     return Promise.reject(error.message || error); 
    } 
} 

campground.ts

export class Campground { 
    id: number; 
    name: string; 
    image: string; 
    description: string; 
    username: string; 
    user_id: number; 
} 

comment.ts

export class Comment { 
    id: number; 
    text: string; 
    campground_id: number; 
    username: string; 
    user_id: number; 
} 

camp.detail.component.ts

import 'rxjs/add/operator/switchMap'; 
import { Component, Input, OnInit } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 

import { CampgroundService, CampDetail } from "../../services/campgounds.service"; 

@Component({ 
    selector: 'campDetail', 
    templateUrl: './app/components/campgrounds/camp.detail.component.html' 
}) 

export class CampDetailComponent implements OnInit { 
    error: any; 
    campDetail: CampDetail = new CampDetail(); 

    constructor(
     private campgroundService: CampgroundService, 
     private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
     this.route.params 
      .switchMap((params: Params) => this.campgroundService.getCamp(params['id'])) 
      .subscribe(data => { 
       this.campDetail = data; 
       console.log(this.campDetail); 
      }); 
    } 
} 

campground.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { CampgroundService } from "../../services/campgounds.service"; 
import { Campground } from "../../models/campground"; 

@Component({ 
    selector: 'camps', 
    templateUrl: './app/components/campgrounds/campgrounds.component.html', 
    styleUrls: ['./app/components/campgrounds/campgrounds.component.css'] 
}) 

export class CampgroundsComponent implements OnInit { 
    camps: Campground[]; 

    constructor(private router: Router, private campService: CampgroundService) { } 

    getCamps() { 
     this.campService.getCamps().then(camps => this.camps = camps); 
    } 
    ngOnInit() { 
     this.getCamps(); 
    } 

    gotoDetail(id: number) { 
     this.router.navigate(['/detail', id]); 
    } 
} 

私は（getCampsを使用してキャンプ場のAPIを呼び出すときに奇妙なことがある）でcampground.component、すべて正常に動作します。ボタンをクリックした後、

<button class="btn btn-primary" (click)="gotoDetail(camp.id)"> More Info </button> 

他のページに誘導すると、このエラーが発生します。

Answer 1

あなたcampDetailデータを非同期的にロードされ、コンポーネントが作成された時点で利用可能ではありませんので、あなたはAngular safe navigation operatorを使用して、ネストされたプロパティのパスをチェックする必要があります。

{{campDetail?.campground?.name}}