ngOnInit（）メソッドでHttp get要求からオブジェクトを表示するには？

Question

Http getリクエストで受け取ったオブジェクトのプロパティをAngularで表示する際に問題があります。私はngOnInit（）メソッドでHTTPリクエストを呼び出そうとしていますが、うまくいくようです：必要なオブジェクトを受け取って戻します。しかし、その後、httpファイルに表示するのに苦労しています（プロパティは定義されていません）。 Observableをオブジェクトプロパティに接続することはできないようです。私は間違って何をしていますか？

コンポーネント：

import { Component, OnInit } from '@angular/core'; 
import {Package} from "../shared/package"; 
import { Http} from "@angular/http"; 
import 'rxjs/Rx'; 

@Component({ 
    selector: 'app-basket', 
    templateUrl: './basket.component.html', 
    styleUrls: ['./basket.component.css'] 
}) 
export class BasketComponent implements OnInit { 

package: Package; 
    private baseUrl: string = 'https://basket-211b4.firebaseio.com/.json'; 

    constructor(private http: Http) { } 

    ngOnInit() { 
    this.http.get(`${this.baseUrl}`).subscribe(
     (result) =>{ 
     this.package = result.json(); 
     console.log(this.package); 
     } 
    ) 
    } 

HTTPファイル：

<li class="row totals"> 
     <span class="price" >{{ package.id }}</span> 
     </li> 

パッケージクラス：

import {User} from "./user"; 
import {Service} from "./service"; 
export class Package { 
    constructor(public id: number, public totalCost: number, public dateCreated: string, public user: User, 
       public services: Service[]){} 
} 

コンソールエラー：./BasketComponentクラスBasketComponentでエラーが発生しました - インラインテンプレート：31：29原因：未定義のプロパティ 'id'を読み取れません

012コンソールに表示

オブジェクト：オブジェクト{dateCreated： "2017-05-14T18：47：56.000 + 0000"、ID：1、サービス：配列（3）にtotalCost：3600、ユーザー：オブジェクト}

Answer 1

安全ナビゲーション（？）演算子を使用してプロパティを表示できます。

<li class="row totals"> 
    <span class="price" >{{ package?.id }}</span> 
</li>