在Angular中,使用*ngFor指令在嵌套的JSON中进行循环迭代的解决方法如下所示:
假设我们有以下嵌套的JSON数据:
nestedData = [
{
id: 1,
name: 'Category 1',
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
},
{
id: 2,
name: 'Category 2',
items: [
{ id: 4, name: 'Item 4' },
{ id: 5, name: 'Item 5' }
]
},
{
id: 3,
name: 'Category 3',
items: [
{ id: 6, name: 'Item 6' },
{ id: 7, name: 'Item 7' },
{ id: 8, name: 'Item 8' },
{ id: 9, name: 'Item 9' }
]
}
];
在组件中,我们可以将此数据绑定到模板,并使用*ngFor指令进行迭代:
{{ category.name }}
-
{{ item.name }}
在上面的代码中,我们首先使用第一个ngFor迭代嵌套的JSON数据的每个对象,然后在每个对象中使用第二个ngFor迭代相应的items数组。
这样,我们就可以在嵌套的JSON数据中使用*ngFor指令进行循环迭代。