如何在角度中使用嵌套循环内的ngIf条件

Question

我想用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>

当我执行以下错误即将到来

错误TypeError：无法读取未定义的属性“length”

请有人推荐一个正确的方法来完成这个。

Answer 1

只需在?之类的所有长度之前添加?.length即可解决您的问题。谢谢

Answer 2

当变量具有未定义的值时，会出现此错误。

用这个修改你的代码：

<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>

Answer 3

<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>