サービス内にデータがあるのに、htmlで定義されていないオブジェクトが表示されます

Question

私はAngularの新機能で、Tour of Heroesのチュートリアルに従いました。私は今、新しいプロジェクトを開始しました。これは、Strava APIのデータを表示するだけです。

これまでのところ、私はアクティビティのリストを取得して表示することができました。それらはオブジェクトの配列として提供され、次の最初のイメージと同じことを別のURLだけで行います。

アスリートを取得しようとすると、APIはの機能の中にresponse.json()を出力して見ることができるJSONオブジェクトで応答しています。

{{athlete.id}}を使用してページに出力しようとすると、ちょうどCannot read property 'id' of undefinedエラーが発生します。私はこの段階に入るためにたくさんのものを変えようとしましたが、それを働かせることはできません。どんな助けもありがとう。

//getAthlete and getDataFrom URL from the service 
/* Recieve data from a given URL over jsonp */ 
private getDataFromURL(url: string): Promise<any> { 
    return this.jsonp.get(url) 
     .toPromise() 
     .then(response => response.json()) 
     .catch(this.handleError) 
} 

/* Get details of a single athelete */ 
getAthlete(): Promise<any> { 
    let url = 'https://www.strava.com/api/v3/athlete?per_page=1&access_token=' + this.accessToken + '&callback=JSONP_CALLBACK'; 
    return this.getDataFromURL(url) 

} 

---

//getAthlete from the component 

athlete: Object 

getAthlete(): void { 
    this.stravaService.getAthlete().then(athlete => this.athlete = athlete) 
} 

ngOnInit(): void { 
    this.getAthlete() 
} 

---

//Here is the html code to try and put athelete.id on the page 

<span class="id">{{athlete.firstname}}</span> 

Answer 1

使用

{{athlete?.id}} 

非同期ロードされたデータのためのコードnull -safeを作ります。