即使在服務中有數據，對象在html中仍顯示為未定義

Question

我對Angular並不陌生，我很輕松地遵循了《英雄之旅》教程，並使整個應用程序正常工作。 我現在已經開始一個新項目，該項目只是從Strava API獲取數據以顯示它。

到目前為止，我已經設法獲取了一系列活動並將其顯示出來，它們以對象數組的形式出現，並且我只是與下面的第一張圖片做相同的事情，只是使用了不同的URL。

當我嘗試招募運動員時，API用一個JSON對象響應，我可以通過在getDataFromURL函數內部輸出response.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的異步加載的數據-保險箱。