angular.js - angularjs2 how to nest multiple levels of loops
怪我咯
怪我咯 2017-05-15 17:07:24
0
1
758

In angularjs2, *ngFor is an instruction to implement loops. In practice, it was found that multiple levels of loops cannot be nested.
If you want to implement more than 2 nested loops, how should you implement it

怪我咯
怪我咯

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

reply all(1)
过去多啦不再A梦

You can implement nested loops with multiple ngFors. It mainly depends on how your data format corresponds.

Data format:

// 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" },
        ]
    }]
}

Code example:

// 导航带子菜单循环例子
<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>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template