如何在角度嵌套循环中使用 ngIf 条件
2019-03-29
876
我想使用 angular.navigation 菜单实现导航侧边菜单,该菜单有 3 级子菜单 这是我尝试过的代码
<ul class="nav metismenu" id="side-menu" *ngIf="menulist.length != 0">
<li *ngFor="let menu1 of menulist">
<!--level 01-->
<a *ngIf="menu1.SubMenu.length !== 0" href="#">
<span class="fa {{menu1.CssClass}}"></span>
<span class="nav-label">{{menu1.DisplayText}}</span>
<span class="fa arrow"></span>
</a>
<a *ngIf="menu1.SubMenu.length === 0" href="{{url}}{{menu1.ActionUrl}}">
<span class="fa {{menu1.CssClass}}"></span>
<span class="nav-label">{{menu1.DisplayText}}</span></a>
<ul *ngIf="menu1.SubMenu.length !== 0" class="nav nav-second-level collapse" >
<li *ngFor="let menu2 of menu1.SubMenu">
<!--level 02-->
<a *ngIf="menu2.SubMenu.length !== 0" href="#">
<span class="fa {{menu2.CssClass}}"> </span>
<span class="nav-label">{{menu2.DisplayText}}</span>
<span class="fa arrow"></span>
</a>
<a *ngIf="menu2.SubMenu.length === 0" href="{{url}}{{menu2.ActionUrl}}">
<span class="fa {{menu2.CssClass}}"></span>
<span class="nav-label">{{menu2.DisplayText}}</span>
</a>
<ul *ngIf="menu2.SubMenu.length !== 0" class="nav nav-third-level collapse" >
<li *ngFor="let menu3 of menu2.SubMenu">
<!--level 03-->
<a *ngIf="menu3.SubMenu.length !== 0" href="#">
<span class="fa {{menu3.CssClass}}"></span>
<span class="nav-label">{{menu3.DisplayText}}</span>
<span class="fa arrow"></span>
</a>
<a *ngIf="menu3.SubMenu.length === 0" href="{{url}}{{menu3.ActionUrl}}">
<span class="fa {{menu3.CssClass}}"></span>
<span class="nav-label">{{menu3.DisplayText}}</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
当我执行时出现以下错误
ERROR TypeError: Cannot read property 'length' of undefined
请有人推荐一种正确的方法来完成此操作。
3个回答
只需在所有长度前添加
?
(如
?.length
)即可解决您的问题。谢谢
Hassan Siddiqui
2019-03-29
当变量具有未定义的值时会出现此错误。
Modify your code with this:
<ul class="nav metismenu" id="side-menu" *ngIf="menulist && menulist.length != 0">
<li *ngFor="let menu1 of menulist"> <!--level 01-->
<a *ngIf="menu1?.SubMenu && menu1.SubMenu.length !== 0" href="#"> <span class="fa {{menu1.CssClass}}"></span> <span class="nav-label">{{menu1.DisplayText}}</span> <span class="fa arrow"></span> </a>
<a *ngIf="menu1?.SubMenu && menu1.SubMenu.length === 0" href="{{url}}{{menu1.ActionUrl}}"><span class="fa {{menu1.CssClass}}"></span> <span class="nav-label">{{menu1.DisplayText}}</span></a>
<ul *ngIf="menu1?.SubMenu && menu1.SubMenu.length !== 0" class="nav nav-second-level collapse" >
<li *ngFor="let menu2 of menu1.SubMenu"> <!--level 02-->
<a *ngIf="menu2?.SubMenu && menu2.SubMenu.length !== 0" href="#"><span class="fa {{menu2.CssClass}}"> </span><span class="nav-label">{{menu2.DisplayText}}</span> <span class="fa arrow"></span> </a>
<a *ngIf="menu2?.SubMenu && menu2.SubMenu.length === 0" href="{{url}}{{menu2.ActionUrl}}"><span class="fa {{menu2.CssClass}}"></span> <span class="nav-label">{{menu2.DisplayText}}</span></a>
<ul *ngIf="menu2?.SubMenu && menu2.SubMenu.length !== 0" class="nav nav-third-level collapse" >
<li *ngFor="let menu3 of menu2.SubMenu"> <!--level 03-->
<a *ngIf="menu3?.SubMenu && menu3.SubMenu.length !== 0" href="#"> <span class="fa {{menu3.CssClass}}"></span><span class="nav-label">{{menu3.DisplayText}}</span><span class="fa arrow"></span></a>
<a *ngIf="menu3?.SubMenu && menu3.SubMenu.length === 0" href="{{url}}{{menu3.ActionUrl}}"> <span class="fa {{menu3.CssClass}}"></span><span class="nav-label">{{menu3.DisplayText}}</span></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Surjeet Bhadauriya
2019-03-29
<div>
<div class="sidenav" id="divSideNav">
<div class="logoDiv" id="divLogo">
<img src="assets/images/logoArch.png" alt="Arch Logo" class="logoSideNav">
</div>
<div class="logo-navborder" id="divlogoBorder"></div>
<a (click)="workClick()" class={{lnkWorkQueue}} id="lnkWorkQueue">Queue1</a>
<div class="side-navbarborder" id="divWorkQueueBorder"></div>
<a (click)="quickQuoteClick()" class={{lnkQuickClick}} id="lnkInitiateRow">Queue2</a>
<div class="side-navbarborder" id="divInitiateRowBorder"></div>
<a (click)="fullQuoteClick()" class={{lnkFullClick}} id="lnkInitiateNew">Queue3</a>
<div class="side-navbarborder" id="divInitiateNewBorder"></div>
<a (click)="endorsementClick()" class={{lnkRenewClick}} id="lnkEndrose">Queue4</a>
<div class="side-navbarborder" id="divEndroseBorder"></div>
<a (click)="renewClick()" class={{lnkLossClick}} id="lnkRenew">Queue5</a>
<div class="side-navbarborder" id="divRenewBorder"></div>
<a (click)="lossClick()" class={{lnkReprintClick}} id="lnkLoss">Queue6</a>
<div class="side-navbarborder" id="divLossBorder"></div>
<a id="lnkInf" (click)="infCenterClick()" id="lnkInfCenter" class={{lnkInfClick}}>Queue7
<img src={{arrowImageInf}}>
</a>
<div *ngIf="subInfCenter">
<a class="subMenu">View Form Library</a>
<a class="subMenu">Classification Guide</a>
<a class="subMenu">UW Guide</a>
<a class="subMenu">FAQ</a>
<a class="subMenu">Contact Center</a>
</div>
<div class="side-navbarborder" id="divInfCenterBorder"></div>
<a id="lnkSup" (click)="supportClick()" id="lnkSupportr" class={{lnkSupportClick}}>Support
<img src={{arrowImageSup}}>
</a>
<div *ngIf="support">
<a class="subMenu">View Form Library</a>
<a class="subMenu">Classification Guide</a>
</div>
<div class="side-navbarborder" id="divSupportBorder"></div>
</div>
</div>
suresh
2019-03-29