當我點擊“投資組合”時，箭頭向下。
然后，出現一個子選單，箭頭向上
如果我點擊“投資組合”，箭頭總是向上的。
通常，箭頭應該向下。
我不明白如何處理這個？
管理組件.html
<ul class="nav-links" *ngFor="let menu of menus; let i = index">
<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 }}"
*ngIf="selectedTab !== menu.route"
style="position: absolute; right: 20px; "
></i>
<i
class="{{ menu.arrowUp }}"
*ngIf="selectedTab === menu.route"
style="position: absolute; right: 20px; "
></i>
</a>
</li>
admin.component.ts
export class AdminComponent implements OnInit {
selectedTab: string;
showSubmenu: any[] = [];
showInfo: any[] = [];
menus: any[] = [
/* Market */
{
class: 'bx bx-grid-alt',
item: 'Market',
route: 'market',
arrowDown: 'bx bx-chevron-down',
arrowUp: 'bx bx-chevron-up',
submenus: [
{
class: 'bx bx-box',
item: 'Item',
route: 'item',
},
],
},
/* Currency */
{
class: 'bx bx-grid-alt',
item: 'Currency',
route: 'currency',
},
/* Porfolio */
{
class: 'bx bx-box',
item: 'Portfolio',
route: 'portfolio',
arrowDown: 'bx bx-chevron-down',
arrowUp: 'bx bx-chevron-up',
submenus: [
{
class: 'bx bx-grid-alt',
item: 'Element',
route: 'element',
},
],
},
];
constructor() {}
ngOnInit() {}
toggleMenu(index: number) {
this.showSubmenu[index] = !this.showSubmenu[index];
}
toggleSubmenu(event: MouseEvent, item: string) {
event.stopPropagation();
this.showInfo[item] = !this.showInfo[item];
}
}
我可以在Stackblitz上與您分享代碼。
謝謝你的解釋。
uj5u.com熱心網友回復：
當有人單擊選單選項以展開子選單時，hmtl 代碼為變數 selectedTab 提供menu.route的值（ (click)="toggleMenu(i); selectedTab = menu.route"）。
然后，如果該單擊的選項有一個子選單，則代碼會顯示第二個圖示（箭頭向上）。
這是正確的，但是當您再次單擊以折疊子選單時， selectedTab 繼續將menu.route的值作為其值，因此它繼續顯示第二個圖示（箭頭向上）。
為了防止這種情況發生，您只需為放置一個或另一個圖示的 *ngIfs 添加一個保護，以便它僅在顯示子選單時顯示箭頭向上（當 showSubmenu[i] === true 時）。
例如，你只需要改變這個：
<i
class="{{ menu.arrowDown }}"
*ngIf="selectedTab !== menu.route || !showSubmenu[i]"
style="position: absolute; right: 20px; "
></i>
<i
class="{{ menu.arrowUp }}"
*ngIf="selectedTab === menu.route && showSubmenu[i]"
style="position: absolute; right: 20px; "
></i>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/373500.html