json - Angular,如何订阅嵌套的 JSON 对象?
问题描述
我有一个关于嵌套 JSON 对象的问题。在我们的服务器中,在路径“/dev/api/sportstypes/2”中,有一个像这样的对象;
{
"NBA": {
"link": "https://www.nba.com/",
"ticketPrice": 50
},
"UEFA": {
"link": "https://www.uefa.com/",
"ticketPrice": 39
},
"CL": {
"link": "https://www.uefa.com/uefachampionsleague/",
"ticketPrice": 76
},
"EuroLeague": {
"link": "https://www.euroleague.net/",
"ticketPrice": 42
}
}
我相信这是一个嵌套的 JSON 对象,因为它确实有多个小对象。我的体育课是这样的;
export class Sports {
link: string; //THE WEBSITE LINK OF THE SPORTS ASSOCIATION
ticketPrice: number; //THE AVG TICKET PRICE FOR THAT ASSOCIATION
}
我试图让这样的 JSON 对象投入使用;
getPrices():Observable<Sports[]> {
return this.http.get<Sports[]>(sportsPath); //sportsPath is the path in our server that goes to the JSON I have given
}
在 ts 文件中,我尝试用这个函数订阅对象;
sportsObject : Sports[] //THIS IS THE MEMBER THAT SHOULD BE FILLED WITH THE JSON OBJECT GIVEN
ngOnInit(){
this.SportsService.getPrices().subscribe(data=>{
this.sportsObject = data;
console.log("Our member contains: " + this.sportsObject);
})
}
但是,正如你们可能猜到的那样,这个控制台日志给了我这个;我们的成员包含:[object Object]。那么我怎样才能正确地获取和订阅这个对象呢?
此外,在我的 HTML 文件中,它给出了“找不到类型为 'object' 的不同支持对象 '[object Object]'。NgFor 仅支持绑定到 Iterables,例如数组。” 运行此 ngFor 代码时出错;
<div *ngFor="let member of sportsObject">
<p>The link is:</p>
<p>member.link</p>
</div>
那么,我将如何正确执行 ngFor?
解决方案
我相信你订阅正确。日志记录是一个问题。尝试逗号而不是加号
console.log("Our member contains: ", this.sportsObject);