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);

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

1 个答案: