如何有条件地在 mat-menu 中添加 [matMenuTriggerFor]

Rim*_*ika 5 angular-material angular

很少#menu有项目没有子子项。但显示箭头表示有一个子菜单。这是错误的。如何[matMenuTriggerFor]="subMenu"仅在子菜单中有项目时添加。

<mat-menu #menu="matMenu">
    <ng-container *ngFor="let item of menuItem.items; let i=index"> 
        <button class="mat-menu-item" mat-menu-item
            [routerLink]="item.routerLink" routerLinkActive="active" [matMenuTriggerFor]="subMenu"> {{item.name}}
        </button>
        <mat-menu #subMenu="matMenu"> <button class="mat-sub-menu-item"
                *ngFor="let subitem of menuItem.items[i].subitems" mat-menu-item> {{ subitem.name }} </button>
        </mat-menu>
    </ng-container>
</mat-menu>
Run Code Online (Sandbox Code Playgroud)

Rim*_*ika 0

通过向按钮添加 *ngIf="menuItem.items[i].subitems" 解决了此问题

<button class="mat-menu-item" [class.more-menu-item]="menuItem.name=='More'"  mat-menu-item  [routerLink]="item.routerLink"
        routerLinkActive="active" [matMenuTriggerFor]="subMenu"><span class="pm-menu-item">{{item.name}}</span><i class="material-icons pm-menu-icon-right" *ngIf="menuItem.items[i].subitems">keyboard_arrow_right</i>
 </button>
Run Code Online (Sandbox Code Playgroud)

  • 这解决了您的问题,这对您来说是一个胜利,但没有回答原来的问题,因此它不太可能对其他人找到此问题有帮助。对于目标元素需要保持可见但仅有条件地使用菜单进行响应的情况,如果有答案或好的解决方法,那就太好了。 (3认同)