以角度處理嵌套的 JSON 對象數組

Question

我有這樣的 JOSN 格式的數據。

[
{
    "name": "The Godfather",
    "image": "https://image.tmdb.org/t/p/w600_and_h900_bestv2/rPdtLWNsZmAtoZl9PK7S2wE3qiS.jpg" ,
    "reviewRating": {
        "votes": [{
            "rating": 9,
            "votes": 159
        }, {
            "rating": 8,
            "votes": 201
        }, {
            "rating": 7,
            "votes": 49
        }, {
            "rating": 6,
            "votes": 69
        }, {
            "rating": 5,
            "votes": 125
        }],
        "total": 603
    }
}]

我在 HTML 文件中嘗試了這個。

 <li>
        {{movie.reviewRating}}
</li>

名稱和圖像加載完美，但是當我嘗試加載嵌套對象數組時。這是我得到的輸出。

[object Object]

Answer 1

使用*ngFor迭代movie數據。 由於reviewRating.votes也是一個數組，因此您再次需要迭代reviewRating.votes以正確顯示它。

 <ul>
    <li *ngFor="let item of movie">
      {{ item.name }}<br />
      <img [src]="item.image" />

      <ul>
          <li *ngFor="let vote of item.reviewRating.votes">
            {{ vote.rating }} <br />
            {{ vote.votes }}
        </li>
      </ul>
    </li>        
  </ul>

Answer 2

你可以像這樣使用JsonPipe

<li>
        {{movie.reviewRating | json}}
</li>

Answer 3

假設您想顯示每個評分的值，您應該使用ngFor遍歷它們，如果您還需要顯示“總計”，您可以按如下所示進行。

<li *ngFor="let reviewRating of movie.reviewRating.votes">
   Rating: {{reviewRating.rating}}, votes: {{reviewRating.votes}}
</li>
<li>
   Total: {{movie.reviewRating.total}}
</li>

ngFor是強制性的，因為您不能“按原樣”顯示元素數組，而 angular 無法單獨猜測它。 ngFor 將負責迭代每個項目，直到集合完成。