Как добавить пользовательские элементы подменю, получаемые из API в ionic-4? - PullRequest
Новая
       46

Как добавить пользовательские элементы подменю, получаемые из API в ionic-4?

0 голосов
/ 28 мая 2019

Я хочу добавить элементы подменю в ion-меню, которое я получаю из API, но я не могу загрузить элементы подменю, используя ionic-4.

Когда я использую статические элементы подменю, он отображается правильно, но когда я использую массив из API, он не отображается.

когда я использую это, он работает отлично: - 

pages = [
    {
      title: 'Main',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'Categories',
      children: [
        {
          title: 'categories',
          url: '/categories',
          icon: 'arrow-dropright'
        },
        {
          title: 'wishlist',
          url: '/wishlist',
          icon: 'arrow-dropright'
        }, {
          title: 'Your Orders',
          url: '/your-orders',
          icon: 'arrow-dropright'
        }, {
          title: 'My Profile',
          url: '/profile',
          icon: 'play'
        }
      ]
    }, {
      title: 'Offers',
      children: [
        {
          title: 'categories',
          url: '/categories',
          icon: 'play'
        },
        {
          title: 'wishlist',
          url: '/wishlist',
          icon: 'play'
        },
      ]
    }, {
      title: 'LogOut',
      url: '/user-login',
      icon: 'log-out'
    }
  ];

но когда я использую вот так: - 

pages = [
    {
      title: 'Main',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'Categories',
       children: this.menuArrayHome

    },
     {
      title: 'LogOut',
      url: '/user-login',
      icon: 'log-out'
    }
  ];

this.menuArrayHome = [
{title: "Clothing", icon: "arrow-dropright", url: "play"},
{title: "Electronics", icon: "arrow-dropright", url: "play"},
{title: "Shoes", icon: "arrow-dropright", url: "play"},
{title: "Watches", icon: "arrow-dropright", url: "play"},
{title: "Jewellery", icon: "arrow-dropright", url: "play"},
{title: "Health and Beauty", icon: "arrow-dropright", url: "play"},
{title: "Bags & Luggage", icon: "arrow-dropright", url: "play"},
{title: "Home Furnishing", icon: "arrow-dropright", url: "play"},
{title: "Men", icon: "arrow-dropright", url: "play"}
]

App.component.html: - 

<ion-app>
  <ion-menu contentId="content" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div *ngFor="let p of pages">
        <ion-menu-toggle *ngIf="p.url">
          <ion-item [routerLink]="p.url" routerDirection="root" routerLinkActive="active">
            <ion-icon [name]="p.icon" slot="start"></ion-icon>
            <ion-label>
              {{p.title}}
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open" [class.parent-active]="p.open"
          style="font-weight: 500;" detail="false">
          <ion-icon slot="start" name="arrow-forward" *ngIf="!p.open"></ion-icon>
          <ion-icon slot="start" name="arrow-down" *ngIf="p.open"></ion-icon>
          <ion-label>{{ p.title }}</ion-label>
        </ion-item>
        <ion-list *ngIf="p.open">
          <ion-menu-toggle>
            <ion-item *ngFor="let sub of p.children" class="sub-item" style="padding-left: 20px;
                  font-size: small;" [routerLink]="sub.url" routerDirection="root" routerLinkActive="active"
              style="--ion-text-color: var(--ion-color-primary);">
              <ion-icon [name]="sub.icon" slot="start"></ion-icon>
              <ion-label>
                {{ sub.title }}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </div>
    </ion-content>
  </ion-menu>
  <ion-router-outlet [swipeGesture]="false" id="content" main></ion-router-outlet>
</ion-app>

Если кто-нибудь знает, где я не прав, пожалуйста, дайте мне знать. Спасибо

...