Question

我在我的有角网站中有一个导航栏，我想在其中一个导航栏下拉菜单中显示动态项目，我设法按如下所示在代码中添加了静态项目，现在我想对其进行更改，列出我的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的结果的屏幕截图，这些结果已添加到名为brands的数组中，如上面的代码所示：

my current nav bar and the static items 我的api的结果：

api response

阵列中的动态导航栏项目

0 个答案: