如何在侧边栏中显示子菜单以在 Ionic 中循环显示菜单

Question

我正在使用 Ionic App，我想在侧边栏中显示子菜单。我正在使用*ngFor 获取菜单，但问题是我无法显示子菜单。

这是我的app.html：

<ion-menu [content]="content" side="left" type="overlay">
    <ion-content class="mymenu22">
     <ion-grid class="formenu11">
      <h1 class="mymenuh11">OTHERS</h1>
     </ion-grid>
     <ion-list>
      <button menuClose ion-item *ngFor="let p1 of pages1" (click)="openPage(p1)" class="menu2">
        <ion-icon name="{{p1.name1}}"></ion-icon> {{p1.title1}}
      </button>
     </ion-list>
    </ion-content>
</ion-menu>

在这里，我在侧边栏中显示菜单，我想显示第一个菜单的子菜单。

这是我的 app.component.ts：

pages1: Array<{title1: string, component: any, name1: string}>;
this.pages1 = [
  { title1: 'Manage Account', component: ManageaccountPage, name1: 'settings' },
  { title1: 'About Us', component: AboutPage, name1: 'people' },
  { title1: 'Gallery', component: GalleryPage, name1: 'images' },
  { title1: 'Contact Us', component: ContactPage, name1: 'contacts' },
];

对于管理帐户，我想显示子菜单。

对于管理帐户，我想显示子菜单，但我没有得到任何代码。

非常感谢任何帮助。

Answer 1

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.scss'],
    })
    export class AppComponent {
      public appPages = [
        { title: 'Home', url: 'home', icon: 'home' },
        { title: 'About', url: '/about', icon: 'people' },
        { title: 'Contact', url: '/contact', icon: 'call' },
        { title: 'Gallery', url: '/gallery', icon: 'images' },
        { title: 'Setting', url: '/setting', icon: 'settings',
     children: [
            { title: 'sub-menu1', url: '/sub-menu1', icon: 'person' },
            { title: 'sub-menu2', url: '/sub-menu2', icon: 'person' },
            { title: 'sub-menu3', url: '/sub-menu3', icon: 'pulse' }
          ] }
      ];
      constructor() {}
    }


==app.component.html==

<ion-app>
  <ion-split-pane >
    <ion-menu menuId="custom">
      <ion-header>
        <ion-toolbar >
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
       <div *ngFor="let p of appPages">
        <ion-menu-toggle *ngIf="p.url">
          <ion-item (click)="sidemenuClick(p)" [routerDirection]="'root'" [routerLink]="[p.url]"  [routerLinkActive]="['active-menu']">
            <ion-icon slot="start" [name]="p.icon"></ion-icon>
            <ion-label class="menu-name">
              {{p.title}}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open"
          [class.active-parent]="p.open" detail="false">
          <ion-icon slot="start" [name]="p.icon"></ion-icon>          
          <ion-label class="menu-name">
            {{p.title}}
          </ion-label>
          <ion-icon  slot="end" name="arrow-dropdown" *ngIf="p.open"></ion-icon>
          <ion-icon  slot="end" name="arrow-dropright" *ngIf="!p.open"></ion-icon>
        </ion-item>
        <ion-list *ngIf="p.open">
          <ion-menu-toggle>
            <ion-item  style="padding-left: 20px;" *ngFor = "let sub of p.children" (click)="sidemenuClick(p)" [routerDirection]="'root'" [routerLink]="[sub.url]"  [routerLinkActive]="['active-menu']">
              <ion-icon slot="start" [name]="sub.icon"></ion-icon>
              <ion-label class="menu-name">
                {{sub.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
       </div>
      </ion-content>
      <ion-footer class="bar-stable" (click)="logout()">
        <ion-menu-toggle>
          <ion-item class="sign-out">
            <ion-icon class="app-color logo" slot="end" name="log-out"></ion-icon>
            <ion-label class="app-color name">Sign Out</ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-footer>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>