使用* ngFor（角度4）遍历JSON对象数组

Question

我想遍历对象数组，这在我的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对象

Answer 1

对于Angular 6.1+，您可以使用默认管道keyvalue（也请复习）：

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

工作演示

先前：如您所说：

Angular2-* ngFor /遍历带有数组的json对象，这无济于事

您不需要它，因为您的代码工作正常，请检查

工作演示

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"}
    ]
  }
  ];
}