Javascript 在angular中使用JSON对象的嵌套数组

我有像这样的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>

---

使用

*ngFor

迭代

电影

数据。由于

reviewRating.voces

也是一个数组，您需要再次迭代

reviewRating.voces

以正确显示它

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

{{item.name}}



{{vote.rating}}

{{vote.voces}

您可以这样使用

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

{{movie.reviewRating | json}

假设您想要显示每个评级的值，您应该使用

ngFor

对它们进行迭代，如果您也需要显示“总计”，您可以按如下所示进行操作

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

评级：{{reviewRating.Rating}，投票：{{reviewRating.Voces}


总计：{{movie.reviewRating.Total}

---

ngFor

是必需的，因为您不能“按原样”显示元素数组，只能猜测它。ngFor将负责迭代每个项目，直到收集完成。

希望如何加载它们？您想要显示的内容不明显。我正在显示电影的名称和封面图像。我想显示所有投票和评级。如果你仔细检查你的JSON，

movie.reviewRating

实际上是一个属性为

voces

（这是一个数组）的对象，也许你正在搜索

{{movie.reviewRating.voces}

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