Angular html，如何為嵌套的 object 進行 ngfor 循環？

Question

我在我們的服務器中有一個 object 是這樣的；

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

我用這段代碼訂閱了這個 object；

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 Object]'的不同。” 錯誤。 如何正確迭代此 JSON object？

Answer 1

*ngFor指令默認支持像 arrays 這樣的迭代。 在這里，您可以嘗試使用鍵值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()"和*dir="someFunc()" ）和插值（ {{ someFunc() }} ）中調用函數。 原因是如果您不控制更改檢測策略，那么每個 CD 周期都會觸發這些功能，並可能導致性能問題。

Answer 2

在您的 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>

Answer 3

您可以使用鍵值keyvalue 。 另外，我建議使用async pipe 而不是將數據從 API 分配給sportsObject 。 它可能看起來像這樣：

TS：

sports$: Observable<Sports>;    

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

HTML：

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