通过 *ngFor 循环遍历 JSON 对象数组（Angular 4）

Question

我可以帮您进行翻译！以下是翻译的结果：

我想循环遍历一个对象数组，该数组在我的json文件中。

Json

[
  {
    "name": "Mike",
    "colors": [
      {"name": "blue"},
      {"name": "white"}
    ]
  },

  {
    "name": "Phoebe",
    "colors": [
      {"name": "red"},
      {"name": "yellow"}
    ]
  }
]

html

<div *ngFor="let person of persons">
   <p>{{person.name}}</p> <!-- this works fine-->
   <p *ngFor="let color of person.colors"> <!--I want to list the colors of the person here-->
     {{color.name}}
   </p>
</div>

我无法访问一个人的颜色数组。我该如何实现？

我已经查看了这些帖子，但它们的解决方案都不能帮助我：

Angular2 ngFor迭代JSON

Angular2 - *ngFor / 循环遍历包含数组的JSON对象

- BlueCat

---

让person.colors的颜色变量成为color。投票关闭由于打字错误。 - JB Nizet

可能是 https://dev59.com/KXNA5IYBdhLWcg3wX8rk 的重复问题。 - baao

@JBNizet 抱歉，我在我的帖子中忘记了这个问题，但是我在我的代码中有它，所以那不可能是问题的原因。 - BlueCat

不，打开控制台会立即出现错误和解决方案 @Pac0 - baao

关闭第一段落。检查您的控制台是否有错误消息。 - JB Nizet

好的，现在你的代码示例已经修复了，我们向你展示了你所展示的代码中没有任何问题。问题可能在于你将对象分配给变量 persons 的方式上。请添加必要的代码以重现此问题（一个 [mcve]）。 - Pac0

Answer 1

对于 Angular 6.1+， 您可以使用默认的管道keyvalue（也请查看审查）：

<ul>
    <li *ngFor="let recipient of map | keyvalue">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>

演示

---

之前：如你所说：

Angular2 - *ngFor / 循环遍历带数组的JSON对象，这对你没有帮助。

你不需要那个，因为你的代码工作得很好，请检查一下。

演示

- Vivek Doshi

---

天啊！解决方案居然只是一根管子？伙计，这就是我一直在寻找的答案，几周前在工作任务中应该使用它（我使用了一些奇怪的技巧来解决）。非常感谢@Vivek...如果将来遇到同样的问题，我可能会参考这个。 - Akhil

非常感谢你，Vivek，你救了我的一天 :) - Jayesh Dhandha

很好 - 我也一样！谢谢 - Voltan

Answer 2

您展示的代码（部分）运行良好（请参见下面链接的plunker）。

由于您的问题中未显示将JavaScript对象分配给变量persons的方式，因此我建议您展示更多代码/在那里搜索问题。 https://plnkr.co/edit/rj4K2sKHTHsVtdt4OWfC?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div *ngFor="let person of persons">
        <p>{{person.name}}</p> <!-- this works fine-->
        <p *ngFor="let color of person.colors"> <!--I want to list the colors of the person here-->
           {{color.name}}
        </p>
      </div>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {

  }

  persons = [
  {
    "name": "Mike",
    "colors": [
      {"name": "blue"},
      {"name": "white"}
    ]
  },

  {
    "name": "Phoebe",
    "colors": [
      {"name": "red"},
      {"name": "yellow"}
    ]
  }
  ];
}

- Pac0

---

我正在使用json-server访问我的json文件。我可以发布代码，但我认为这会更加混乱，因为它是很多代码，而且我认为访问json文件并不是问题，因为我可以看到人名，所以这不应该是问题。我想我可能在数组方面做错了什么，但是正如我在您的plunker中看到的那样，它应该可以正常工作。很奇怪，因为我有与您的plunker完全相同的代码，但它在我的代码中不起作用。 - BlueCat

@BlueCat：你可能没有相同的代码，否则它不会给出不同的结果。你能至少展示一下从浏览器控制台网络选项卡中请求到你的服务器的确切返回值吗？以及它是如何赋值给变量persons的？或者说，也许你在某个地方用其他东西覆盖了persons？ - Pac0

我已经解决了。我的代码运行良好，但我的json-server出现了一些问题。我解决了这个问题，现在它终于可以工作了。无论如何，还是感谢你的帮助。 - BlueCat