angular.js - angularjs2 如何嵌套多层循环
本文介绍了angular.js - angularjs2 如何嵌套多层循环的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
在angularjs2中,*ngFor是实现循环的指令,实践的时候,发现无法嵌套多层的循环。
如果要实现嵌套2个以上的循环,应该怎么实现呢
解决方案
可以实现嵌套循环,多个 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>
这篇关于angular.js - angularjs2 如何嵌套多层循环的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文