Html 我们 *ngFor 用于带有嵌套数组的 JSON 对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38110614/
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
Us *ngFor for JSON object with nested arrays
提问by Per Larsen
I I have a JSON object that has several levels of nest objects as well as nested arrays of objects. I would like to know how to use Angular2 and *ngFor to iterate through the object and end up with the listed printed out. The first *ngFor works but the next *ngFor give me and error saying Cannot read property nodes of undefined
II 有一个 JSON 对象，它具有多个级别的嵌套对象以及嵌套的对象数组。我想知道如何使用 Angular2 和 *ngFor 遍历对象并最终打印出列出的对象。第一个 *ngFor 有效，但下一个 *ngFor 给我和错误说Cannot read property nodes of undefined
Current HTML code
当前的 HTML 代码
<div class="col-md-3">
<div>
<ol>
<li *ngFor="let item of videoList" > {{item.title}} </li>
<ol>
<li *ngFor="let subItem of videoList.item.nodes"> {{subItem.title}} </li>
</ol>
</ol>
</div>
</div>
JSON object
JSON 对象
videoList = [
{
'id':1,
'title':'Lower Extremities',
'nodes':[
{
'id':11,
'title':'Cast Receive',
'nodes':[
{
'id':111,
'title':'Video 1',
'nodes':[
{
'id':1111,
'title':'Working',
'nodes':[]
},
{
'id':1112,
'title':'Stacking',
'nodes':[]
},
]
},
{
'id':112,
'title':'Video 2',
'nodes':[]
},
{
'id':113,
'title':'Video 3',
'nodes':[]
}
]
},
{
'id':12,
'title':'Cast Inspection',
'nodes':[
{
'id':121,
'title':'Video 1',
'nodes':[]
},
{
'id':122,
'title':'Video 2',
'nodes':[]
},
{
'id':123,
'title':'Video 3',
'nodes':[]
}
]
},
{
'id':13,
'title':'Cut & Set',
'nodes':[
{
'id':131,
'title':'Video 1',
'nodes':[]
},
{
'id':132,
'title':'Video 2',
'nodes':[]
},
{
'id':133,
'title':'Video 3',
'nodes':[]
}
]
}
]
}
EDITI attempted the given answer and all I recieved was a list of numbers 1, 2, and 3. Here is what I did.
编辑我尝试了给定的答案，但我收到的只是数字 1、2 和 3 的列表。这就是我所做的。
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<ol>
<li *ngFor="let item of videoList" > {{item.title}} </li>
<ol>
<li *ngFor="let subItem of item['nodes']" > {{subItem.title}} </li>
</ol>
</ol>
`
})
export class AppComponent {
videoList = [
{
'id':1,
'title':'Lower Extremities',
'nodes': [
{
'id':11,
'title':'Second node',
'nodes': "[]"
},
{
'id':12,
'title':'Second node',
'nodes': "[]"
}
]
},
{
'id':2,
'title':'Second node',
'nodes': []
},
{
'id':3,
'title':'third node',
'nodes': []
}
];
}
回答by AngJobs on Github
The second forloop should be
第二个for循环应该是
<li *ngFor="let subItem of item['nodes']"> {{subItem.title}} </li>
回答by Per Larsen
The problem I was having was I was not nesting the successive <li>elements properly in the previous <li>tags. Here is how it should have been.
我遇到的问题是我没有<li>在前面的<li>标签中正确嵌套连续元素。这是它应该如何。
<div>
<ol>
<li *ngFor="let item of videoList" >
<div>{{item.title}}</div>
<ol>
<li *ngFor="let subItem of item.nodes">
<div>{{subItem.title}}</div>
</li>
</ol>
</li>
</ol>
</div>
