Я хочу добавить элементы подменю в 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>
Если кто-нибудь знает, где я не прав, пожалуйста, дайте мне знать.
Спасибо