Question

我是Angular的新手，我设法很容易地按照英雄之旅教程，让整个应用程序正常运行。我现在已经开始了一个新项目，它只是从Strava API获取数据来显示它。

到目前为止，我已经设法获取活动列表并显示它们，它们以对象数组形式出现，我只是做与下面第一张图片相同的事情，只是使用不同的URL。

当我尝试获得运动员时，API正在使用JSON对象进行响应，我可以通过在response.json()函数内输出getDataFromURL来查看该对象。

当我尝试使用{{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 - 对于异步加载的数据是安全的。

对象在html中显示为未定义，即使它在服务中有数据

1 个答案: