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

Question

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

{
    "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 对象？

Answer 1

*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>

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