Angular 如何在Ionic中循环显示菜单的侧栏中显示子菜单

我在爱奥尼亚应用程序中工作，我想在侧边栏中显示子菜单。我正在使用

*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>

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' },
];

其他
{{p1.标题1}}

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

这是我的app.component.ts：

<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>

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' },
];

pages1：数组；
此参数为0.pages1=[
{标题1:'管理帐户'，组件：ManageaccountPage，名称1:'设置'}，
{标题1:'关于我们'，组件：AboutPage，名称1:'人'}，
{标题1:'Gallery'，组件：GalleryPage，名称1:'images'}，
{标题1:'联系我们'，组件：ContactPage，名称1:'联系人'}，
];

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

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

---

非常感谢您的帮助。

您可以将子菜单页面保存在页面对象内的另一个数组中，并使用

*ngFor

填充要查看的页面

使用所需属性定义页面

对象
。

pages1: Array<{title1: string, component: any, name1: string, showDetails: boolean, icon: string, subPages: any[]}>;

    this.pages1 = [
  { title1: 'Manage Account', component: ManageaccountPage, name1: 'settings', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'About Us', component: AboutPage, name1: 'people', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'Galler', component: GalleryPage, name1: 'images', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'Contact Us', component: '', name1: 'contacts', showDetails: false, icon: 'ios-arrow-down',
          subPages: [
            { title1: 'Contact1', component: Contact1Page, name1: 'contact1' },
            { title1: 'Contact2', component: Contact2Page, name1: 'contact2'  },
            { title1: 'Contact3', component: Contact3Page, name1: 'contact3'  },
        ]
   },
];

  openPage(p1) {
    this.rootPage = p1.component;
  }

  toggleDetails(p) {
    if (p.showDetails) {
        p.showDetails = false;
        p.icon = 'ios-arrow-down';
    } else {
        p.showDetails = true;
        p.icon = 'ios-arrow-up';

    }
}

<ion-menu [content]="content" side="left" type="overlay">
    <ion-content>
     <ion-grid>
      <h1>OTHERS</h1>
     </ion-grid>
     <ion-list>
      <ion-item ion-item *ngFor="let p1 of pages1" (click)="toggleDetails(p1)" [ngStyle]="{'background': (p1.subPages != null) ? '#dcd5d5': null}">
        <ion-icon name="{{p1.name1}}"></ion-icon>
         <span *ngIf="p1.component === ''">{{p1.title1}}</span>
         <span *ngIf="p1.component !== ''" menuClose (click)="openPage(p1)">{{p1.title1}}</span>
         <ion-icon float-right *ngIf="p1.subPages != null" [name]="p1.icon" item-end></ion-icon>
        <div *ngIf="p1.showDetails &&p1.subPages != null">
          <ion-list>
            <ion-item style="border-bottom: 1px solid #1f1c1c;background: #dcd5d5" ion-item *ngFor="let subP of p1.subPages">
              <span (click)="openPage(subP)"  menuClose>{{subP.title1}}</span>
            </ion-item>
          </ion-list>
        </div>
      </ion-item>
     </ion-list>
    </ion-content>
</ion-menu>

定义从侧边菜单打开单击页面的功能。

pages1: Array<{title1: string, component: any, name1: string, showDetails: boolean, icon: string, subPages: any[]}>;

    this.pages1 = [
  { title1: 'Manage Account', component: ManageaccountPage, name1: 'settings', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'About Us', component: AboutPage, name1: 'people', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'Galler', component: GalleryPage, name1: 'images', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'Contact Us', component: '', name1: 'contacts', showDetails: false, icon: 'ios-arrow-down',
          subPages: [
            { title1: 'Contact1', component: Contact1Page, name1: 'contact1' },
            { title1: 'Contact2', component: Contact2Page, name1: 'contact2'  },
            { title1: 'Contact3', component: Contact3Page, name1: 'contact3'  },
        ]
   },
];

  openPage(p1) {
    this.rootPage = p1.component;
  }

  toggleDetails(p) {
    if (p.showDetails) {
        p.showDetails = false;
        p.icon = 'ios-arrow-down';
    } else {
        p.showDetails = true;
        p.icon = 'ios-arrow-up';

    }
}

<ion-menu [content]="content" side="left" type="overlay">
    <ion-content>
     <ion-grid>
      <h1>OTHERS</h1>
     </ion-grid>
     <ion-list>
      <ion-item ion-item *ngFor="let p1 of pages1" (click)="toggleDetails(p1)" [ngStyle]="{'background': (p1.subPages != null) ? '#dcd5d5': null}">
        <ion-icon name="{{p1.name1}}"></ion-icon>
         <span *ngIf="p1.component === ''">{{p1.title1}}</span>
         <span *ngIf="p1.component !== ''" menuClose (click)="openPage(p1)">{{p1.title1}}</span>
         <ion-icon float-right *ngIf="p1.subPages != null" [name]="p1.icon" item-end></ion-icon>
        <div *ngIf="p1.showDetails &&p1.subPages != null">
          <ion-list>
            <ion-item style="border-bottom: 1px solid #1f1c1c;background: #dcd5d5" ion-item *ngFor="let subP of p1.subPages">
              <span (click)="openPage(subP)"  menuClose>{{subP.title1}}</span>
            </ion-item>
          </ion-list>
        </div>
      </ion-item>
     </ion-list>
    </ion-content>
</ion-menu>

定义一个函数来折叠/展开侧菜单中的子菜单项。

pages1: Array<{title1: string, component: any, name1: string, showDetails: boolean, icon: string, subPages: any[]}>;

    this.pages1 = [
  { title1: 'Manage Account', component: ManageaccountPage, name1: 'settings', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'About Us', component: AboutPage, name1: 'people', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'Galler', component: GalleryPage, name1: 'images', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'Contact Us', component: '', name1: 'contacts', showDetails: false, icon: 'ios-arrow-down',
          subPages: [
            { title1: 'Contact1', component: Contact1Page, name1: 'contact1' },
            { title1: 'Contact2', component: Contact2Page, name1: 'contact2'  },
            { title1: 'Contact3', component: Contact3Page, name1: 'contact3'  },
        ]
   },
];

  openPage(p1) {
    this.rootPage = p1.component;
  }

  toggleDetails(p) {
    if (p.showDetails) {
        p.showDetails = false;
        p.icon = 'ios-arrow-down';
    } else {
        p.showDetails = true;
        p.icon = 'ios-arrow-up';

    }
}

<ion-menu [content]="content" side="left" type="overlay">
    <ion-content>
     <ion-grid>
      <h1>OTHERS</h1>
     </ion-grid>
     <ion-list>
      <ion-item ion-item *ngFor="let p1 of pages1" (click)="toggleDetails(p1)" [ngStyle]="{'background': (p1.subPages != null) ? '#dcd5d5': null}">
        <ion-icon name="{{p1.name1}}"></ion-icon>
         <span *ngIf="p1.component === ''">{{p1.title1}}</span>
         <span *ngIf="p1.component !== ''" menuClose (click)="openPage(p1)">{{p1.title1}}</span>
         <ion-icon float-right *ngIf="p1.subPages != null" [name]="p1.icon" item-end></ion-icon>
        <div *ngIf="p1.showDetails &&p1.subPages != null">
          <ion-list>
            <ion-item style="border-bottom: 1px solid #1f1c1c;background: #dcd5d5" ion-item *ngFor="let subP of p1.subPages">
              <span (click)="openPage(subP)"  menuClose>{{subP.title1}}</span>
            </ion-item>
          </ion-list>
        </div>
      </ion-item>
     </ion-list>
    </ion-content>
</ion-menu>

您的侧菜单html应如下所示。

pages1: Array<{title1: string, component: any, name1: string, showDetails: boolean, icon: string, subPages: any[]}>;

    this.pages1 = [
  { title1: 'Manage Account', component: ManageaccountPage, name1: 'settings', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'About Us', component: AboutPage, name1: 'people', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'Galler', component: GalleryPage, name1: 'images', showDetails: false, icon: 'ios-arrow-down', subPages: null },
  { title1: 'Contact Us', component: '', name1: 'contacts', showDetails: false, icon: 'ios-arrow-down',
          subPages: [
            { title1: 'Contact1', component: Contact1Page, name1: 'contact1' },
            { title1: 'Contact2', component: Contact2Page, name1: 'contact2'  },
            { title1: 'Contact3', component: Contact3Page, name1: 'contact3'  },
        ]
   },
];

  openPage(p1) {
    this.rootPage = p1.component;
  }

  toggleDetails(p) {
    if (p.showDetails) {
        p.showDetails = false;
        p.icon = 'ios-arrow-down';
    } else {
        p.showDetails = true;
        p.icon = 'ios-arrow-up';

    }
}

<ion-menu [content]="content" side="left" type="overlay">
    <ion-content>
     <ion-grid>
      <h1>OTHERS</h1>
     </ion-grid>
     <ion-list>
      <ion-item ion-item *ngFor="let p1 of pages1" (click)="toggleDetails(p1)" [ngStyle]="{'background': (p1.subPages != null) ? '#dcd5d5': null}">
        <ion-icon name="{{p1.name1}}"></ion-icon>
         <span *ngIf="p1.component === ''">{{p1.title1}}</span>
         <span *ngIf="p1.component !== ''" menuClose (click)="openPage(p1)">{{p1.title1}}</span>
         <ion-icon float-right *ngIf="p1.subPages != null" [name]="p1.icon" item-end></ion-icon>
        <div *ngIf="p1.showDetails &&p1.subPages != null">
          <ion-list>
            <ion-item style="border-bottom: 1px solid #1f1c1c;background: #dcd5d5" ion-item *ngFor="let subP of p1.subPages">
              <span (click)="openPage(subP)"  menuClose>{{subP.title1}}</span>
            </ion-item>
          </ion-list>
        </div>
      </ion-item>
     </ion-list>
    </ion-content>
</ion-menu>


其他
{{p1.标题1}}
{{p1.标题1}}
{{子标题1}}

我想这对你有帮助。查找。
从'@angular/core'导入{Component}；
@组成部分({
选择器：'应用程序根'，
templateUrl:'app.component.html'，
样式URL:['app.component.scss']，
})
导出类AppComponent{
公共应用程序页=[
{title:'Home'，url:'Home'，icon:'Home'}，
{title:'About'，url:'/About'，icon:'people'}，
{title:'Contact'，url:'/Contact'，icon:'call'}，
{标题：'Gallery'，url:'/Gallery'，图标：'images'}，
{title:'Setting'，url:'/Setting'，icon:'settings'，
儿童：[
{title:'sub-menu1'，url:'/sub-menu1'，icon:'person'}，
{标题：'sub-menu2'，url:'/sub-menu2'，图标：'person'}，
{title:'sub-menu3'，url:'/sub-menu3'，图标：'pulse'}
] }
];
构造函数（）{}
}
==app.component.html==
菜单
{{p.title}}
{{p.title}}
{{sub.title}}
退出
这可以吗？我已经显示了菜单，但我想显示要联系的子菜单。就像单击+图标时，它会打开子菜单。我没有收到你的消息。哦，你是说另一个用于联系我们的子菜单？这不是你想要的吗？请不要只发布代码作为答案，但也要解释一下你的代码是做什么的，以及它是如何解决问题的。带有解释的答案通常更有帮助，质量更好，更容易吸引选票。