[英]Loop through array of JSON object with *ngFor (Angular 4)
我想遍历一个对象数组,这是在我的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>
我无法访问一个人的颜色数组。 我如何实现这一目标?
我已经查看了这些帖子,但他们的解决方案无法帮助我:
对于角度6.1+,你可以使用默认的管道keyvalue
( 做审查也 ):
<ul>
<li *ngFor="let recipient of map | keyvalue">
{{recipient.key}} --> {{recipient.value}}
</li>
</ul>
以前:正如你所说:
Angular2 - * ngFor /循环通过带有数组的json对象 ,这对你无济于事
你没有任何需要,因为你的代码工作正常,请检查
您的代码(您显示的部分)工作正常(请参阅下面链接的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"}
]
}
];
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.