angular.js - angularjs2 如何嵌套多层循环-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

angular.js - angularjs2 如何嵌套多层循环

怪我咯 2017-05-15 17:07:24

[AngularJS讨论组]

1079

在angularjs2中，*ngFor是实现循环的指令，实践的时候，发现无法嵌套多层的循环。
如果要实现嵌套2个以上的循环，应该怎么实现呢

怪我咯

走同样的路，发现不同的人生

全部回复(1)

过去多啦不再A梦2017-05-15 17:09:24 1楼

可以实现嵌套循环，多个 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>