angularjs2 如何嵌套多层循环

最新推荐文章于 2023-12-19 16:38:03 发布

alisaGreen

最新推荐文章于 2023-12-19 16:38:03 发布

阅读量5.1k

点赞数

分类专栏： js 文章标签： angular

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在AngularJS 2中使用多层循环来遍历嵌套的数据结构，通过示例展示了如何利用ngFor指令进行多级菜单的渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

摘自：https://segmentfault.com/q/1010000007093735/a-1020000007094572

angularjs2 如何嵌套多层循环

已采纳

可以实现嵌套循环，多个 ngFor 即可。主要看你的数据格式怎么对应。

数据格式：

// demo.json

{
    "nav": [{
        "title": "一级导航1",
        "subs": [
            { "txt": "二级导航1", "link": "#" },
            { "txt": "二级导航2", "link": "#" },
        ]
    }, {
        "title": "一级导航2",
        "subs": [
            { "txt": "二级导航2", "link": "#" },
        ]
    }, {
        "title": "一级导航3",
        "subs": [
            { "txt": "二级导航3", "link": "#1" },
        ]
    }]
}

代码例：

// 导航带子菜单循环例子
<ul>
    <li *ngFor="let nav of navs">  // 这里是外层循环
        <strong>{{nav.title}}</strong>
        <a *ngFor="let sub of nav.subs" href="{{sub.link}}"> // 这里是内层循环
            {{sub.txt}}
        </a>
    </li>
</ul>

这里就和平常使用的循环一样的，考虑的第一个然后获取第二个参数接着循环，不用考虑得那么复杂