Json 角度html，如何为嵌套对象创建循环？

我在我们的服务器中有一个这样的对象

{
    "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
    }
}

我用这段代码订阅这个对象

sportsObject : Sports[] //THIS IS THE MEMBER THAT SHOULD BE FILLED WITH THE JSON OBJECT GIVEN
object = Object;
ngOnInit(){
    this.SportsService.getPrices().subscribe(data=>{
      this.sportsObject = data;
    })    
}

这是我的html代码

   <div *ngFor="let key of Object.keys(sportsObject)">
       <p>The {{key}} is {{{{sportsObject[key]}}</p>
   </div>

{{key}}是{{{{sportsObject[key]}

---

但是我遇到“找不到类型为“object.”的不同支持对象“[object object]”错误。如何正确迭代此JSON对象？

*ngFor

指令默认支持类似于数组的iterables。在这里，您可以尝试使用管道（角度）迭代对象。请尝试以下操作

{{sport.key}}是{{sport.value.ticketPrice}}

更多信息：

---

另外，作为旁注，通常最好避免在指令绑定（

[dir]=“someFunc（）”

和

*dir=“someFunc（）”

）和插值（

{{someFunc（）}

）中调用函数。原因是如果您没有控制更改检测策略，则每个CD周期都会触发这些功能，并可能导致性能问题。

在ts文件中，将密钥作为数组保留

this.sportsObject = data;
this.keys= Object.keys(data);

并在模板中直接使用此数组

<div *ngFor="let key of keys">
    <p>Key is: {{ key }}</p>
    <p>{{ sportsObject[key].link }}</p>
    <p>{{ sportsObject[key].ticketPrice }}</p>
</div>

密钥是：{{Key}}

{{sportsObject[key].link}

{{sportsObject[key].ticketPrice}

您可以使用

keyvalue

管道。此外，我建议使用

async

管道，而不是将API中的数据分配给

sportsObject

。它可能如下所示：

TS:

sports$：可见；
恩戈尼尼特（）{
this.sports$=this.SportsService.getPrices（）；
}

HTML:

{sport.key}是{sport.value}

*ngFor

只接受数组。您需要将对象转换为iterable数组。@Kirubel我怎么做？json应该是

{“sports”：[“NBA”：{…}，“UEFA”：{…}}

，以便服务实际返回数组。

sports$: Observable<Sports>;    

ngOnInit(){
  this.sports$ = this.SportsService.getPrices();
}

<div *ngFor="let sport of (sports$ | async) | keyvalue">
   <p>The {{sport.key}} is {{sport.value}}</p>
</div>