时间戳

首页 > 解决方案 > Angular html，如何对嵌套对象进行 ngfor 循环？

json - Angular html，如何对嵌套对象进行 ngfor 循环？

问题描述

我的服务器中有一个像这样的对象；

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

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

标签： jsonangulartypescript

解决方案

*ngFor默认情况下，指令支持像数组这样的可迭代对象。在这里，您可以尝试使用keyvalue管道（Angular v6.1.0+）来迭代对象。尝试以下

<div *ngFor="let sport of sportsObject | keyvalue">
  <p>The {{ sport.key }} is {{ sport.value.ticketPrice }}</p>
  <p>More Info: <a [attr.href]="sport.value.link">{{ sport.value.link }}</a></p>
</div>

另外作为旁注，通常最好避免在指令绑定 ( [dir]="someFunc()"and *dir="someFunc()") 和插值 ( {{ someFunc() }}) 中调用函数。原因是如果您不控制更改检测策略，那么每个 CD 周期都会触发这些功能，并可能导致性能问题。

推荐阅读