在侧面菜单嵌套循环中应用ngIf条件后，折叠/展开CSS函数在角度6中不起作用[关闭]

Question

这是我的侧栏动态嵌套循环绑定代码

 <ul class="nav metismenu" id="side-menu" *ngIf="concatMenulist?.length > 0">

                <li  *ngFor="let menu1 of concatMenulist"> <!--level 01-->

                      <a *ngIf="menu1?.SubMenu && menu1.SubMenu?.length > 0" href="#"> <span class="fa fa-book"></span> <span class="nav-label">{{menu1.DisplayText}}</span> <span class="fa arrow"></span> </a>
                      <a *ngIf="!menu1?.SubMenu || menu1.SubMenu?.length === 0" href="{{menu1.ActionUrl}}"><span class="fa fa-user"></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 fa-book"> </span><span class="nav-label">{{menu2.DisplayText}}</span> <span class="fa arrow"></span> </a>
                               <a *ngIf="!menu2?.SubMenu || menu2.SubMenu?.length === 0" href="{{menu2.ActionUrl}}"><span class="fa fa-book"></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 fa-book"></span><span class="nav-label">{{menu3.DisplayText}}</span><span class="fa arrow"></span></a>
                                           <a *ngIf="!menu3?.SubMenu || menu3.SubMenu?.length === 0" href="{{menu3.ActionUrl}}"> <span class="fa fa-pencil"></span><span class="nav-label">{{menu3.DisplayText}}</span></a>
                                      </li>

                                  </ul>
                         </li>

                    </ul>
                </li>

        </ul>

在添加ngIf条件之前，css展开/折叠正常工作。但输入后，不工作。请有人帮帮我...

Answer 1

<ul class="nav metismenu" id="side-menu" [hidden]="concatMenulist?.length > 0">

                <li  *ngFor="let menu1 of concatMenulist"> <!--level 01-->

                      <a [hidden]="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 [hidden]="!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  [hidden]="menu1?.SubMenu && menu1.SubMenu?.length > 0"  class="nav nav-second-level collapse" >

                         <li  *ngFor="let menu2 of menu1.SubMenu" > <!--level 02-->

                               <a [hidden]="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 [hidden]="!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 [hidden]="menu2?.SubMenu &&menu2.SubMenu?.length > 0"  class="nav nav-third-level collapse" >

                                       <li *ngFor="let menu3 of menu2.SubMenu"> <!--level 03-->
                                           <a [hidden]="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 [hidden]="!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>

我的项目有同样的问题。你可以在这里使用[hidden] =“condition”，希望它能正常工作。

Answer 2

我想你应该稍微查看代码的结构。 ngIf正在从DOM中删除元素，如果条件不满足并且你只有一个崩溃类。这可能是你问题的根源。您也可以使用ngClass切换展开折叠，这可能更容易。