{{menuName.name}} Pages -6ren">
gpt4 book ai didi

javascript - ngFor 里面 ngFor - Angular 2

转载 作者:行者123 更新时间:2023-11-30 08:27:58 29 4
gpt4 key购买 nike

我如何在 Angular 2 中使用 *ngFor 遍历多维数组。下面是我使用的 DOM 包装器:

<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
}];

第二个循环根本不渲染。

最佳答案

您的代码中存在一些小问题,拼写错误。第二个 *ngFor 应该是这样的:

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

注意它是 menuName 而不是 menuNames 并且在 let idx 之前有一个分号。

关于javascript - ngFor 里面 ngFor - Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42181601/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com