本文介绍了Us * ng用于嵌套数组的JSON对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个JSON对象，它具有多个嵌套对象级别以及嵌套的对象数组。我想知道如何使用Angular2和* ngFor遍历对象，并最终列出打印输出。第一个* ngFor工作，但下一个* ngFor给我和错误说无法读取未定义的属性节点
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
当前HTML代码
Current HTML code
<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对象
JSON object
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':[]
}
]
}
]
}
编辑
我尝试了给定的答案和所有我收到了一个数字列表1,2和3.这是我做的。
EDITI attempted the given answer and all I recieved was a list of numbers 1, 2, and 3. Here is what I did.
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': []
}
];
}
- < ol>
< li * ngFor =let item ['nodes']的子项目> {{subItem.title}}< / li>
< / ol>
< / ol>
`
}）
导出类AppComponent {
videoList = [
{
'id'：1，
'title'：'下肢'，
'节点'：[
{
'id'：11，
'title'：'Second node'，
'nodes'：[]
}，
{
'id'：12，
'title'：'Second node'，
'nodes'：[]
}
]
}，
{
'id'：2，
'title'：'Second node'，
'nodes'：[]
}，
{
'id'：3，
'title'：'third node'，
'nodes'：[]
}
];
推荐答案
<li *ngFor="let subItem of item['nodes']"> {{subItem.title}} </li>
这篇关于Us * ng用于嵌套数组的JSON对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！