ngFor内部ngFor - 角2

怎样在角2 下面使用*ngFor遍历多维阵列的DOM包装即时通讯使用：ngFor内部ngFor - 角2

<li *ngFor="let menuName of menuNames" routerLinkActive="active" [ngClass]="{'has-submenu':menuName.submenu?.length>0 }"> 
    <a href="#" [routerLink]="menuName.route" *ngIf="!menuName.enableSM"> <i class="glyphicon {{menuName.icon}}"></i><span class="nav-label">{{menuName.name}}</span> </a> 
    <a href="#" *ngIf="menuName.enableSM"> <i class="glyphicon glyphicon-list-alt"></i> <span class="nav-label">Pages</span> </a> 
    <ul class="list-unstyled" *ngIf="menuName.enableSM"> 
     <li *ngFor="let subMenuName of menuNames['submenu'] let idx = index;"> <a [routerLink]="subMenuName.route">404</a> </li> 
    </ul> 
</li>

和嵌套阵列：

menuNames = [{ 
    name: "Dashboard", 
    route: '/home', 
    icon: "glyphicon-th-large", 
    submenu: [], 
    enableSM: false 
}, { 
    name: "Pages", 
    route: '', 
    icon: "glyphicon-list-alt", 
    submenu: [{ 
     name: "404", 
     route: '/404.html' 
    }, { 
     name: "Signin", 
     route: '/auth/signin' 
    }], 
    enableSM: true 
}];

第二个循环根本不渲染。

来源

2017-02-11 Fahid Mohammad

作为一个侧面说明。可以通过使用'[class.name-of-class] =“expression”'语法来简化'[ngClass]'。欲了解更多详情，请访问我的答案[这里]（http://stackoverflow.com/questions/42168286/how-to-change-the-css-class-in-angular2/42168593#42168593）。 –

你是对的，它处理这种情况的整洁方式:) –

代码中有拼写错误。其次*ngFor应该是这样的：

*ngFor="let subMenuName of menuName['submenu']; let idx = index;"

心灵是menuName不menuNames，有一个分号let idx …之前。

来源

2017-02-11 21:52:54

正确，虽然'menuName.submenu'会更好的风格。索引还没有使用，所以应该删除。 –

非常感谢您指出错误。这只是一个直截了当的信号，我应该在凌晨4点停止编码：P。 –

ngFor内部ngFor - 角2

回答

相关问题