Question

我想使用angular.Navigation菜单具有三级子菜单来实现导航侧菜单这是我尝试过的代码

<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：无法读取未定义的属性'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

  public <T> T queryDB(Class<T> klass, Object... objects) {
    return dbClient.get(klass, objects);
  }

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

3 个答案: