オブザーバブルの仕組みの理解

Question

私はIonic2を使用しています。私はjsonデータの束を返すサービスを作成しましたが、 "概念"の理解に問題があります。

私は物事が私のために奇妙な取得ページのthatsでそれらを使用しようとすると、私は私の両方の機能を理解

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import 'rxjs/Rx'; 

@Injectable() 
export class PlaceService { 

constructor(private http: Http) {} 

getPlaces() 
{ 
    let url = '/api/43.009953/-81.273613/b502daab-2c7b-4cea-a00e-dc5aa6b58196'; 
    return this.http.get(url).map(res=>res.json()) 

} 

getPlace() 
{ 
    let url = '/api/getplace/b502daab-2c7b-4cea-a00e-dc5aa6b58196/6'; 
    return this.http.get(url).map(res=>res.json()) 

} 

} 

はObserables返しますがいます。あなたは私がthis.place = data.Placeフラットな特性とコレクションのプロパティを持つJSONオブジェクトであるを持って見ることができるように

はこちらのページ

public placeName:string; 
public place:any; 
public amenities: any; 
constructor(public navCtrl: NavController, 
public placeService: PlaceService, 
public navParams: NavParams, 
public actionSheetCtrl: ActionSheetController) { 

    let placeId = navParams.get("placeId"); 

    placeService.getPlace().subscribe(data=>{ 
    this.place = data.Place; 
    this.placeName = this.place.Name; 
    this.amenities= data.Amenities; 
    console.log(this.amenities); 
    }); 

} 

の.TSでそれを使用してコードです。

私の観察可能なすべてのフラットプロパティのようですが、私は自分のページにプロパティを作成しなければならないので、htmlでアクセスできます。例えばthis.placeName = this.place.Name

なぜカント私は私の全体のJSONオブジェクト（フラットおよび収集プロパティ）で一つのオブジェクトを持っており、私のページにこのようにそれを参照

{{place.Name }}

Answer 1

実際にはフィールドにのみ割り当てることができ、テンプレート内のそのフィールドを使用し続けることができます。

placeService.getPlace().subscribe(data=>{ 
    this.data = data; 
    }); 

テンプレート例：

<div> 
    <p>{{data?.Place}}</p> 
    <p>{{data?.Place?.name}}</p> 
    <p>{{data?.Amenities}}</p> 
</div> 

注：たとえば、安全なナビゲーション演算子 "?" 非同期データのために有用です。それは、dataがnullでないときに実行することを意味します。data.Place