Блог

Я пытаюсь создать компонент, который будет динамически отображать навигационную панель с мат-вкладками для моего приложения. Моя проблема в том, что для некоторых навигационных элементов также требуется меню Mat. Я изо всех сил пытаюсь понять, как это сделать как можно более эффективно. Вот и пример полезной нагрузки, которую я использую для отображения навигационной панели (пожалуйста, обратите внимание на элементы меню в необязательном наблюдаемом для загрузки пунктов меню.

 pages: NavbarPage[] = [
    { 
      hasMenu: false,
      label: 'Page Uno',
      pageType: 0,
      path: '/uno',
      menuItems: null
    },
    { 
      hasMenu: true,
      label: 'Page Dos',
      pageType: 1,
      path: '/dos',
      menuItems: menuItems$
    },
    { 
      hasMenu: false,
      label: 'Page Tres',
      pageType: 2,
      path: '/tres',
      menuItems: null
    },
    { 
      hasMenu: true,
      label: 'Page Cuatro',
      pageType: 3,
      path: '/cuatro',
      menuItems: anotherMenuItemsObservable$
    }
  ];
 

Я не могу понять, как создать мат-меню только для двух пунктов, которым нужно мат-меню, а не для остальных, так как я также использую *ngFor. Я упускаю что-то очевидное? Любая помощь или объяснения будут оценены по достоинству! Одна из моих неудачных попыток приведена ниже:

 <nav mat-tab-nav-bar mat-align-tabs="center">
  <ng-container *ngFor="let page of pages">     
<ng-container *ngIf="page.hasMenu === true">
      <a mat-tab-link routerLinkActive #rla="routerLinkActive"
  (click)="navigate(page)" [matMenuTriggerFor]="appMenu">{{page.label}}
  <mat-icon *ngIf="page.isMenu">expand_more</mat-icon></a>
    </ng-container>
    <ng-container *ngIf="page.hasMenu === false">
      <a mat-tab-link routerLinkActive #rla="routerLinkActive"
      [routerLink]="page.path" [active]="rla.isActive">{{page.label}}</a>
    </ng-container>
  </ng-container>
</nav>