问题描述
在angularjs2中,*ngFor是实现循环的指令,实践的时候,发现无法嵌套多层的循环。如果要实现嵌套2个以上的循环,应该怎么实现呢
问题解答
回答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='https://www.6hehe.com/wenda/{{sub.link}}'> // 这里是内层循环 {{sub.txt}}</a> </li></ul>