Как использовать условие ngIf внутри вложенного цикла в угловых - PullRequest
Новая
       6

Как использовать условие ngIf внутри вложенного цикла в угловых

0 голосов
/ 29 марта 2019

Я хочу реализовать навигационное боковое меню, используя 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' с неопределенным значением

пожалуйста, кто-нибудь порекомендует правильный способ закончить это.

Ответы [ 3 ]

1 голос
/ 29 марта 2019

Просто добавьте ?, прежде чем вся длина как ?.length решит вашу проблему. Спасибо

0 голосов
/ 29 марта 2019 
<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>
0 голосов
/ 29 марта 2019

Эта ошибка возникает, когда переменные имеют неопределенное значение.

Измените ваш код следующим образом: 

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