僅當數據在Ionic 2中準備就緒時才呈現模板

在我的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 }); 
    } 

}

this.rides.getRide調用從API獲取數據的方法。

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

{{ ride.id }}

這使我的錯誤ID不是未定義的屬性。

如何確保我的模板僅在對象可用後呈現？

我試圖添加：*ngIf="ride"我的離子內容。這工作，但混亂整個佈局。我相信有一個更好的方法來消滅它。

來源

2017-02-13 almo

您可以使用安全導航操作符（?）「保護」你的模板，直到REST調用完成，數據是即時拍攝：

{{ ride?.id }}

瞭解更多關於安全導航操作here。

你也可以簡單地初始值賦給ride，所以它不是undefined在模板渲染的時刻：

ride: any = {};

來源

2017-02-13 20:49:02

感謝，對於大部分的作品。我的搭乘物體嵌套了物體的「航點」。當我嘗試獲取航點[0]。我得到的錯誤無法讀取0的undefined。當我檢查我的對象時，航點都在那裏。我能用類似的技術解決這個問題嗎？我嘗試過：ride？.waypoints [0]，但它給我帶來了上述錯誤。 – almo

@almo'waypoints'是一個數組？不幸的是，如果我沒有記錯的話，安全的導航操作符不能用於數組，但是它們可能在最近的更新中發生了變化，我沒有讀取所有更新日誌。 –

是的，航點是一個數組。 – almo

僅當數據在Ionic 2中準備就緒時才呈現模板

回答

相關問題