0

我正在制作一个sidenav，我用它mat-expansion-panel来创建我的sidenav的按钮。

我创建了子菜单，我没有问题：

在此处输入图像描述

但现在我想添加子子菜单。例如，我想在 下添加Users list一个新的子菜单Add user。如果可以的话，我想再次使用mat-expansion-panel

有没有可能实现这一目标？

现在，这是我的 sidenav（都是动态的）

<mat-sidenav #sidenav mode="side" opened class="w-1/6 flex flex-col h-full border-r border-green-400" style="top:0.1rem">
    <h3 class="text-center text-gray-900" style="margin-top: 0.75rem">{{ "SETTINGS.administration" | translate }}</h3>
    <mat-divider class="border-green-400"></mat-divider>
    <mat-nav-list>
        <mat-expansion-panel *ngFor="let parent of this.serviceSettings.getSettingsParent()"
                             [expanded]="this.serviceSettings.getSelectedParentSetting() == parent['id']">
            <mat-expansion-panel-header>
                <mat-panel-title>
                    {{ parent['label'] | translate }}
                </mat-panel-title>
            </mat-expansion-panel-header>
            <div class="w-full border-t-2 border-gray-600">
                <div class="border-b border-gray-400 " *ngFor="let setting of this.serviceSettings.getSettings()[parent['id']];">
                    <button mat-button [class.text-green-400]="this.serviceSettings.getSelectedSetting() === setting['id']"
                            class="font-normal w-full h-20 flex justify-center items-center text-center"
                            (click)="this.serviceSettings.changeSetting(setting['id'], parent['id'])"
                            routerLink="{{ setting['route'] }}">
                        <i class="absolute left-4 w-10 h-10 rounded-full flex items-center justify-center fa-lg {{setting['icon']}}"> </i>
                        <p [class.font-medium]="this.serviceSettings.getSelectedSetting() === setting['id']" class="m-0">
                            {{ setting['label'] | translate }}
                        </p>
                    </button>
                </div>
            </div>
        </mat-expansion-panel>
    </mat-nav-list>
</mat-sidenav>
4

0 回答 0