在Angular中实现简单的嵌套迭代可以使用ngFor指令。下面是一个示例代码:
在组件的HTML文件中使用ngFor指令实现嵌套迭代:
{{ category.name }}
- {{ item }}
在组件的Typescript文件中定义categories数组:
import { Component } from '@angular/core';
@Component({
selector: 'app-nested-iteration',
templateUrl: './nested-iteration.component.html',
styleUrls: ['./nested-iteration.component.css']
})
export class NestedIterationComponent {
categories = [
{
name: 'Category 1',
items: ['Item 1', 'Item 2', 'Item 3']
},
{
name: 'Category 2',
items: ['Item 4', 'Item 5', 'Item 6']
},
{
name: 'Category 3',
items: ['Item 7', 'Item 8', 'Item 9']
}
];
}
在这个示例中,categories数组包含三个对象,每个对象都有一个name属性和一个items数组。通过使用ngFor指令,我们可以在HTML文件中迭代categories数组,并在每个循环中显示category的name属性和items数组中的每个项。