На моем угловом веб-сайте есть панель навигации, в которой я хочу отображать динамические элементы в одном из выпадающих меню панели навигации. Мне удалось добавить статические элементы, как показано ниже в моем коде, и теперь я хочу изменить их, мне удалось перечислить элементы из моего API и распечатать их на консоли, но не решил разместить их в меню панели навигации, вот моя панель навигации:
// Menu
export interface Menu {
path?: string;
title?: string;
type?: string;
megaMenu?: boolean;
megaMenuType?: string; // small, medium, large
image?: string;
children?: Menu[];
items?: BrandComponent['brands'];
}
export const MENUITEMS: Menu[] = [
{
title: 'home', type: 'link', path: ''
},
{
title: 'brands', type: 'sub', megaMenu: true, megaMenuType: 'small', children: [
{ path: '/home/right-sidebar/collection/all', title: 'brand 1', type: 'link' },
{ path: '/home/right-sidebar/collection/all', title: 'brand 2', type: 'link' },
{ path: '/home/right-sidebar/collection/all', title: 'brand 3', type: 'link' },
{ path: '/home/right-sidebar/collection/all', title: 'brand 4', type: 'link' },
{ path: '/home/right-sidebar/collection/all', title: 'brand 5', type: 'link' },
{ path: '/home/right-sidebar/collection/all', title: 'brand 6', type: 'link' }
]
}
И вот компонент для него:
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
public menuItems: Menu[];
constructor() { }
ngOnInit() {
this.menuItems = MENUITEMS.filter(menuItem => menuItem);
$.getScript('assets/js/menu.js');
}
}
Вот где я устанавливаю массив элементов:
@Component({
selector: 'app-brand',
templateUrl: './brand.component.html',
styleUrls: ['./brand.component.scss']
})
export class BrandComponent implements OnInit {
public brands: Brand[] = [];
constructor(private route: ActivatedRoute, private router: Router,
private brandsService: BrandsService) {
this.route.params.subscribe(params => {
const id = +params['id'];
});
}
ngOnInit() {
this.getAllBrands();
}
getAllBrands() {
this.brandsService.getAllBrands().subscribe(
result => {
console.log(result);
this.brands = result;
},
error => {
console.log(error);
}
);
}
}
Вот HTML-код для отображения панели навигации:
<nav id="main-nav">
<div class="toggle-nav">
<i class="fa fa-bars sidebar-bar"></i>
</div>
<!-- Sample menu definition -->
<ul id="main-menu" class="sm pixelstrap sm-horizontal">
<li>
<div class="mobile-back text-right">
Back<i class="fa fa-angle-right pl-2" aria-hidden="true"></i>
</div>
</li>
<!-- 1st Level Menu -->
<li *ngFor="let menuItem of menuItems" [class]="menuItem.megaMenu ? 'mega' : ''">
<!-- Sub -->
<a href="javascript:void(0)" *ngIf="menuItem.type === 'sub'">
{{menuItem.title | translate}}
</a>
<!-- Link -->
<a [routerLink]="!menuItem.type ? null : [menuItem.path]" *ngIf="menuItem.type === 'link'">
{{menuItem.title | translate}}
</a>
<!-- External Link -->
<a href="{{ !menuItem.type ? null : menuItem.path }}" *ngIf="menuItem.type === 'extLink'">
{{menuItem.title | translate}}
</a>
<!-- External Tab Link -->
<a href="{{ !menuItem.type ? null : menuItem.path }}" *ngIf="menuItem.type === 'extTabLink'">
{{menuItem.title | translate}}
</a>
<!-- 2nd Level Menu -->
<ul *ngIf="menuItem.children"
[class]="menuItem.megaMenu && menuItem.megaMenuType == 'small' ? 'mega-menu feature-menu' : menuItem.megaMenuType == 'medium' ? 'mega-menu feature-menu product-menu' : menuItem.megaMenuType == 'large' ? 'mega-menu full-mega-menu' : '' "
[id]="'mega-menu'">
<!-- Simple Menu Start-->
<ng-container *ngIf="!menuItem.megaMenu">
<li *ngFor="let childrenItem of menuItem.children">
<!-- Link -->
<a [routerLink]="!childrenItem.type ? null : [childrenItem.path]"
*ngIf="childrenItem.type === 'link' && !menuItem.megaMenu">
{{childrenItem.title | translate}}
</a>
<!-- External Link -->
<a href="{{ !childrenItem.type ? null : childrenItem.path }}"
*ngIf="childrenItem.type === 'extLink' && !menuItem.megaMenu">
{{childrenItem.title | translate}}
</a>
<!-- External Tab Link -->
<a href="{{ !childrenItem.type ? null : childrenItem.path }}" target="_blank"
*ngIf="childrenItem.type === 'extTabLink' && !menuItem.megaMenu">
{{childrenItem.title | translate}}
</a>
</li>
</ng-container>
<!-- Simple Menu End-->
<!-- Small And Medium Mega Menu Start-->
<ng-container
*ngIf="menuItem.megaMenu && menuItem.megaMenuType == 'small' || menuItem.megaMenuType == 'medium'">
<li>
<div class="container">
<div class="row">
<div
[class]="menuItem.megaMenuType == 'small' ? 'col-xl-4' : menuItem.megaMenuType == 'medium' ? 'col-xl-3' : '' "
*ngFor="let childrenItem of menuItem.children">
<!-- Link -->
<a [routerLink]="!childrenItem.type ? null : [childrenItem.path]"
*ngIf="childrenItem.type === 'link'">
<img [src]="childrenItem.image" alt="">
<h6>{{childrenItem.title | translate}}</h6>
</a>
<!-- External Link -->
<a href="{{ !childrenItem.type ? null : childrenItem.path }}" *ngIf="childrenItem.type === 'extLink'">
<img [src]="childrenItem.image" alt="">
<h6>{{childrenItem.title | translate}}</h6>
</a>
<!-- External Tab Link -->
<a href="{{ !childrenItem.type ? null : childrenItem.path }}" target="_blank"
*ngIf="childrenItem.type === 'extTabLink'">
<img [src]="childrenItem.image" alt="">
<h6>{{childrenItem.title | translate}}</h6>
</a>
</div>
</div>
</div>
</li>
</ng-container>
<!-- Small And Medium Mega Menu End-->
<!-- Large Mega Menu Start-->
<ng-container *ngIf="menuItem.megaMenu && menuItem.megaMenuType == 'large'">
<li>
<div class="container">
<div class="row">
<div class="col mega-box" *ngFor="let childrenItem of menuItem.children">
<div class="link-section">
<div class="menu-title">
<h5>{{childrenItem.title | translate}}</h5>
</div>
<div class="menu-content">
<!-- 3nd Level Mega Menu -->
<ul>
<li *ngFor="let childrenSubItem of childrenItem.children">
<!-- Link -->
<a [routerLink]="!childrenSubItem.type ? null : [childrenSubItem.path]"
*ngIf="childrenSubItem.type === 'link'">
{{childrenSubItem.title | translate}}
</a>
<!-- External Link -->
<a href="{{ !childrenSubItem.type ? null : childrenSubItem.path }}"
*ngIf="childrenSubItem.type === 'extLink'">
{{childrenSubItem.title | translate}}
</a>
<!-- External Tab Link -->
<a href="{{ !childrenSubItem.type ? null : childrenSubItem.path }}" target="_blank"
*ngIf="childrenSubItem.type === 'extTabLink'">
{{childrenSubItem.title | translate}}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ng-container>
<!-- Large Mega Menu End-->
</ul>
</li>
</ul>
</nav>
Вот снимок экрана с результатами API, эти результаты добавляются в массив, называемый брендами, как показано в коде выше:
моя текущая панель навигации и статические элементы
Результаты из моего API:
API-ответ
