Angular，如何订阅嵌套的 JSON 对象？

Question

我有一个关于嵌套 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？

Answer 1

我相信您的订阅是正确的。日志记录是一个问题。用逗号代替加号

console.log("Our member contains: ", this.sportsObject);