データがIonic 2で準備されている場合にのみレンダリングテンプレート

Question

私のIonic 2アプリでは、APIからオブジェクトのデータを取得します。次に、このオブジェクトの詳細をテンプレートに表示します。

問題は、オブジェクトが定義されていないため、もちろんエラーをスローする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"を追加しようとしました。これは動作しますが、レイアウト全体が壊れます。私はそれを掘るより良い方法があると確信しています。

Answer 1

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

{{ ride?.id }} 

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

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

ride: any = {};