我想隱藏PortfolioandOrders選單。
我成功地隱藏了Portfolio選單ngIf。
<ul class="nav-links" *ngIf="menu.route !== '/portfolio' || (currentPortfolio$ | async)">
/orders我的問題是,我應該如何隱藏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 *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 ></i>
<span > {{ menu.item }} </span>
<i *ngIf="selectedTab !== menu.route || !showSubmenu[i]"></i>
<i *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 ></i>
<span > {{ submenu.item }} </span>
</a>
</li>
</ng-container>
<li >
<a href="#" (click)="logoff() ">
<i ></i>
<span >Log out</span>
</a>
</li>
</ul>
<ng-template #elseBlock>
<ul *ngIf="menu.route !== '/orders' || (currentPortfolio$ | async)">
</ul>
</ng-template>
</ng-container>
uj5u.com熱心網友回復:
ng-template您可以使用呈現替代模板else,如下所示:
<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
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/431281.html
標籤:有角度的
上一篇:動態和隱藏欄位的反應式表單驗證
