使用 angular 材料，如果子菜单为空，则第一个菜单不会显示在 mat-toolbar 中

Question

我想创建一个嵌套菜单。 顶部菜单栏有 4 个元素。

DevFestFL
Disney
Orlando
Maleficent

第一个没有子菜单，其中的 rest 有子菜单。 现在的问题是第一个菜单没有显示或者它的颜色被背景颜色吃掉了。 我认为我可能需要更改代码但不确定。

    <mat-menu #childMenu="matMenu" [overlapTrigger]="false">
  <span *ngFor="let child of items">
    <!-- Handle branch node menu items -->
    <span *ngIf="child.children && child.children.length > 0">
      <button mat-menu-item color="primary" [matMenuTriggerFor]="menu.childMenu">
        <mat-icon>{{child.iconName}}</mat-icon>
        <span>{{child.label}}</span>
      </button>
      <app-menu-item #menu [items]="child.children"></app-menu-item>
    </span>
    <!-- Handle leaf node menu items -->
    <span *ngIf="!child.children || child.children.length === 0">
      <button mat-menu-item [routerLink]="child.route">
        <mat-icon>{{child.iconName}}</mat-icon>
        <span>{{child.label}}</span>
      </button>
    </span>
  </span>
</mat-menu>

StackBlitz 演示

Answer 1

在 app.component.scss 中添加以下样式，它将解决问题。

  .menu-bar .mat-button.mat-primary {
    color: white;
  }

检查修改后的工作代码。 https://stackblitz.com/edit/dynamic-nested-topnav-menu-j4hu3k?file=app/app.component.scss