Angular Material mat-menu异常：Container Provider类型下Serial选项不显示

嘿，我一眼就揪出问题啦——你在模板里定义了两个同名的模板引用变量#appMenu="matMenu"！

Angular解析模板时，只会识别第一个带#appMenu的<mat-menu>，第二个同名菜单直接被忽略了。这就导致当vm_type是Container Provider时，对应的菜单根本没绑定到Connect按钮上，自然看不到Serial选项。

修复步骤： #

1. 给第二个菜单换个唯一的引用变量名，比如#containerMenu="matMenu"
2. 修改Connect按钮的[matMenuTriggerFor]属性，根据vm_type动态绑定对应菜单

修复后的完整代码如下：

<button 
  mat-raised-button 
  color="primary" 
  [disabled]="(cards[i].state == 'stopped')"
  [matMenuTriggerFor]="cards[i].vm_type === 'Bhyve' ? appMenu : containerMenu"
>
  Connect
</button>

<mat-menu #appMenu="matMenu">
  <button 
    *ngIf="cards[i].vm_type === 'Bhyve'" 
    mat-menu-item 
    color="primary" 
    [disabled]="(!cards[i].vnc || cards[i].state === 'stopped')" 
    (click)="vnc(i)"
  >
    VNC
  </button>
  <button 
    *ngIf="cards[i].vm_type === 'Bhyve'" 
    mat-menu-item 
    color="primary" 
    [disabled]="(cards[i].state === 'stopped')" 
    (click)="serial(i)"
  >
    Serial
  </button>
</mat-menu>

<mat-menu #containerMenu="matMenu">
  <button 
    *ngIf="cards[i].vm_type === 'Container Provider'" 
    mat-menu-item 
    color="primary" 
    [disabled]="(cards[i].state === 'stopped')" 
    (click)="serial(i)"
  >
    Serial
  </button>
</mat-menu>

额外优化建议： #

其实菜单内部的*ngIf可以去掉啦，因为我们已经通过动态绑定菜单区分了不同vm_type，简化后代码更清爽：

<button 
  mat-raised-button 
  color="primary" 
  [disabled]="(cards[i].state == 'stopped')"
  [matMenuTriggerFor]="cards[i].vm_type === 'Bhyve' ? appMenu : containerMenu"
>
  Connect
</button>

<mat-menu #appMenu="matMenu">
  <button 
    mat-menu-item 
    color="primary" 
    [disabled]="(!cards[i].vnc || cards[i].state === 'stopped')" 
    (click)="vnc(i)"
  >
    VNC
  </button>
  <button 
    mat-menu-item 
    color="primary" 
    [disabled]="(cards[i].state === 'stopped')" 
    (click)="serial(i)"
  >
    Serial
  </button>
</mat-menu>

<mat-menu #containerMenu="matMenu">
  <button 
    mat-menu-item 
    color="primary" 
    [disabled]="(cards[i].state === 'stopped')" 
    (click)="serial(i)"
  >
    Serial
  </button>
</mat-menu>

这样调整后，Bhyve类型的VM会弹出带VNC和Serial的菜单，Container Provider类型的VM会弹出仅含Serial的菜单，完全符合你的需求~

内容的提问来源于stack exchange，提问作者vector8188