数据未在 mat-menu 中呈现

Question

我一直在尝试创建一个带有子菜单的导航栏。 导航栏数据已成功呈现，但子菜单不起作用，我对此很陌生。 请让我知道问题出在哪里。

  <mat-nav-list class="navigation relative">
    <div *ngFor="let link of navLinks; let i=index" style="padding-bottom: 14px;">
        <div class="card">
            <mat-list-item appAccordionlinks routerLinkActive="active-link" (click)="onClick(link.name)">
                <a mat-button [matMenuTriggerFor]="submenu" *ngIf="link?.submenu?.length > 0" appAccordiontoggle
                    class="relative main-active">
                    <mat-icon *ngIf="link.icon">{{link.icon}}</mat-icon>
                    <img class="menu-img" *ngIf="link.img" [src]="link.img" alt="">
                    <app-menu-icon *ngIf="link.img" [name]="'employee'"></app-menu-icon>
                    <span>{{link.name}}</span><span fxFlex></span>
                </a>

                <a *ngIf="!(link?.submenu?.length > 0)" [routerLink]="link.path" appAccordiontoggle
                    class="relative main-active" mat-ripple fxLayout="row">
                    <mat-icon *ngIf="link.icon">{{link.icon}}</mat-icon>
                    <app-menu-icon *ngIf="link.img" [name]="link.name" [color]="link.color"></app-menu-icon>

                    <!-- <img class="menu-img" *ngIf="link.img" [src]="link.img" alt=""> this is need to mark as comment -->
                    <span>{{link.name}}</span>
                </a>
            </mat-list-item>
        </div>
    </div>
</mat-nav-list>

<mat-menu #submenu>
    <ng-container *ngFor="let sublink of link?.submenu">
        <ng-container *ngIf="link?.submenu?.length > 0">
            <button mat-menu-item>
                <img class="menu-img" *ngIf="sublink.img" [src]="sublink.img">
                <span>{{sublink.name}}</span>
            </button>
        </ng-container>
    </ng-container>
</mat-menu>

Answer 1

mat-menu元素不在link变量的 scope 之外。 您需要在动态呈现链接的div中包含它（ mat-menu ），即在link的 scope 中：

<div *ngFor="let link of navLinks; let i = index"...>
  <--! card html -->
  <mat-menu #submenu>
    <--! submenu child elements... -->
  </mat-menu>
</div>