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是强制性的，因为您不能仅按“原样”显示元素数组，而仅凭角度无法猜测。 ngFor将负责重复每个项目，直到完成收集。

使用Angular中的JSON对象的嵌套数组

3 个答案: