使用 *ngFor (Angular 4) 循环遍历 JSON 对象数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48402215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loop through array of JSON object with *ngFor (Angular 4)
提问by BlueCat
I want to loop through an array of objects, which is in my json file.
我想遍历一个对象数组，它在我的 json 文件中。
Json
杰森
[
{
"name": "Mike",
"colors": [
{"name": "blue"},
{"name": "white"}
]
},
{
"name": "Phoebe",
"colors": [
{"name": "red"},
{"name": "yellow"}
]
}
]
html
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>
I cant access the colors array of a person. How do I achieve that?
我无法访问一个人的颜色数组。我如何做到这一点？
I've already looked at these posts but the solutions of them couldn't help me:
我已经看过这些帖子，但他们的解决方案无法帮助我：
Angular2 ngFor Iterating over JSON
采纳答案by Pac0
Your code (the part you shown) works fine (see the plunker linked below).
您的代码（您显示的部分）工作正常（请参阅下面链接的 plunker）。
As the only thing not shown in your question is the way you assign your Javascript Object to the variable persons, I urge you to show you more code / search the issue there.
由于您的问题中唯一没有显示的是您将 Javascript 对象分配给变量的方式persons，我敦促您向您展示更多代码/在那里搜索问题。
https://plnkr.co/edit/rj4K2sKHTHsVtdt4OWfC?p=preview
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"}
]
}
];
}
回答by Vivek Doshi
For Angular 6.1+, you can use default pipe keyvalue( Do review also) :
对于 Angular 6.1+，您可以使用默认管道keyvalue（也请查看）：
<ul>
<li *ngFor="let recipient of map | keyvalue">
{{recipient.key}} --> {{recipient.value}}
</li>
</ul>
Previously :As you are saying :
以前：正如你所说：
Angular2 - *ngFor / loop through json object with array, this couldn't help you
Angular2 - *ngFor / 使用数组循环遍历 json 对象，这帮不了你
You dont have any need of that, coz your code works fine , please check
你没有任何需要，因为你的代码工作正常，请检查
