2017-02-13 4 views
1

私のIonic 2アプリでは、APIからオブジェクトのデータを取得します。次に、このオブジェクトの詳細をテンプレートに表示します。データがIonic 2で準備されている場合にのみレンダリングテンプレート

問題は、オブジェクトが定義されていないため、もちろんエラーをスローするAPIからオブジェクトがロードされる前に、テンプレートがオブジェクトを表示しようとしていることです。

これは流れである:

showRide()は呼ばれています:

showRide(rideId) { 
    this.navCtrl.push(DetailsPage, { 
     rideId: rideId 
    }); 
    } 

DetailsPageコンポーネントが開きます。

export class DetailsPage { 

    rideId: any; 
    ride: any; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public rides: Rides) { 
     this.rideId = this.navParams.get('rideId'); 
     this.rides.getRide(this.rideId).subscribe(response => { this.ride = response.ride }); 
    } 

} 

インクルードは、APIからデータを取得するメソッドを呼び出しますthis.rides.getRide。私のテンプレートで

getRide(rideId) { 
     var headers = new Headers(); 
     headers.append('Authorization', 'Token token=' + this.authentification.token); 
     return this.http.get('URL' + rideId , { headers: headers }) 
     .map(res => res.json()); 
    } 

私は、idは、未定義の属性ではないことを私にエラーを与えるID

{{ ride.id }} 

を表示してみてください。

テンプレートはオブジェクトが使用可能になった後にレンダリングされることを確認するにはどうすればよいですか?

私は、私のイオン含有量に*ngIf="ride"を追加しようとしました。これは動作しますが、レイアウト全体が壊れます。私はそれを掘るより良い方法があると確信しています。

答えて

3

REST呼び出しが終了するまで、あなたのテンプレートを「守る」ために安全なナビゲーション演算子(?)を使用することができ、データはavilableです:

{{ ride?.id }} 

が安全なナビゲーション演算子hereについてお読みください。

それはテンプレートのレンダリングの瞬間にundefinedではありませんので、あなたは、単に、rideに初期値を割り当てることができます。大部分のために働く

ride: any = {}; 
+0

感謝を。私の乗り物のオブジェクトにはネストされたオブジェクトのウェイポイントがあります。私がウェイポイント[0]を取得しようとするとき。私はエラーがundefinedの0を読むことができない得る。私が私のオブジェクトを検査するとき、ウェイポイントはすべてそこにあります。これを同様の手法で解決できますか?私は試してみました:ride?.waypoints [0]しかし、それは私に上記のエラーをもたらします。 – almo

+0

@almo 'waypoints'は配列ですか?残念ながら、私が正しく覚えていれば、安全なナビゲーション演算子は配列に使用できませんが、最新の更新プログラムで変更されている可能性があります。すべての変更履歴を読み込んでいません。 –

+0

はい、waypointsは配列です。 – almo

関連する問題