角度13中的IF和ElseIF条件

Question

我想隐藏< code >投资组合和< code >订单菜单。

我成功地用ngIf隐藏了投资组合菜单。

    <ul class="nav-links" *ngIf="menu.route !== '/portfolio'  || (currentPortfolio$ | async)">

我的问题是，我应该如何使用ElseIF隐藏/命令？

    <ul class="nav-links" *ngIf="menu.route !== '/portfolio'  || (currentPortfolio$ | async)" ????>

我不太理解HTML和Angular语法。。。

    <ng-container *ngFor="let menu of menus; let i = index">
    <ul class="nav-links" *ngIf="menu.route !== '/portfolio'  || (currentPortfolio$ | async)">
    <li [ngClass]="{ selected: selectedTab === menu.route }">
       <a routerLink="{{ menu.route }}" routerLinkActive="active" (click)="toggleMenu(i); selectedTab = menu.route">
       <i class="{{ menu.class }}"></i>
       <span class="links_name"> {{ menu.item }} </span>
       <i class="{{ menu.arrowDown }} iconArrow" *ngIf="selectedTab !== menu.route || !showSubmenu[i]"></i>
       <i class="{{ menu.arrowUp }} iconArrow " *ngIf="selectedTab === menu.route && showSubmenu[i]"></i>
       </a>
    </li>

编辑

<ng-container *ngFor="let menu of menus; let i = index">
   <ul class="nav-links" *ngIf="menu.route !== '/portfolio'  || (currentPortfolio$ | async); else elseBlock">
      <li [ngClass]="{ selected: selectedTab === menu.route }">
         <a routerLink="{{ menu.route }}" routerLinkActive="active" (click)="toggleMenu(i); selectedTab = menu.route">
         <i class="{{ menu.class }}"></i>
         <span class="links_name"> {{ menu.item }} </span>
         <i class="{{ menu.arrowDown }} iconArrow" *ngIf="selectedTab !== menu.route || !showSubmenu[i]"></i>
         <i class="{{ menu.arrowUp }} iconArrow " *ngIf="selectedTab === menu.route && showSubmenu[i]"></i>
         </a>
      </li>
      <ng-container *ngFor="let submenu of menu.submenus; let j = index">
         <li *ngIf="showSubmenu[i]">
            <a routerLink="{{ submenu.route }}">
            <i class="{{ submenu.class }} pl20"></i>
            <span class="links_second_name"> {{ submenu.item }} </span>
            </a>
         </li>
      </ng-container>
      <li class="log_out">
         <a href="#" (click)="logoff() ">
         <i class="bx bx-log-out"></i>
         <span class="links_name">Log out</span>
         </a>
      </li>
   </ul>
   <ng-template #elseBlock>
      <ul class="nav-links" *ngIf="menu.route !== '/orders'  || (currentPortfolio$ | async)">
      </ul>
   </ng-template>
</ng-container>

Answer 1

您可以使用 else 渲染替代模板 ng-template，如下所示：

<ul
  class="nav-links"
  *ngIf="
    menu.route !== '/portfolio' || (currentPortfolio$ | async);
    else elseBlock
  "
>
  <!-- ... -->
</ul>
<ng-template #elseBlock>
  <ul>
    <!-- ... -->
  </ul>
</ng-template>

在此处阅读有关使用 else 显示替代模板的更多信息：https://angular.io/api/common/NgIf#showing-an-alternative-template-using-else