Question

我正在尝试使用mat-menu和matMenuTriggerFor创建页面的菜单顶部，我在材料网站（https://material.angular.io/components/menu/examples）中找到了一个示例，并尝试实施该示例，但一切正常，但我遇到了错误。

ERROR Error: mat-menu-trigger: must pass in an mat-menu instance.
Example:
  <mat-menu #menu="matMenu"></mat-menu>
  <button [matMenuTriggerFor]="menu"></button>"

在控制台中

。我不知道原因有人知道解决方案吗？

Answer 1

我知道为时已晚但我有同样的错误并使用此动态菜单Demo ，适用于使用angular 6及更高版本的用户打开您需要更改的 menuitem.component 文件：

  @ViewChild('childMenu') public childMenu;

对此：

  @ViewChild('childMenu', {static: true}) public childMenu: any;

请确保您将 {static：true} 设为错误，并给出此错误。

我希望有帮助

Answer 2

例如[matMenuTriggerFor]指令没有对mat-menu组件的引用（模板变量）时，此问题就很复杂，例如，这将在控制台中引发相同的错误

<button mat-button [matMenuTriggerFor]="">Menu</button>
<mat-menu #menu>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

或者您也可以像这样[[matMenuTriggerFor]

添加指令

正确的解决方案将是这样

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu>
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Answer 3

问题已解决，因此显然与材料网站中的示例无关，与穆罕默德的解释相反。菜单之前我只有几个按钮，它们具有[matMenuTriggerFor] =“ home” aa，而且我没有任何菜单可以引用它们。我的代码是这样的：

<button mat-button [matMenuTriggerFor]="home" >Home</button>
<button mat-button [matMenuTriggerFor]="edit">Sources</button>
<button mat-button [matMenuTriggerFor]="sources">Sources</button>
<!--the example from material website-->
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

并且抛出了我上面提到的错误，现在我更改了代码并删除了前三个按钮中未使用的[matMenuTriggerFor]，问题已解决。工作代码是：

<button mat-button >Home</button>
<button mat-button >Sources</button>
<button mat-button >Sources</button>
<!--the example from material website-->
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Answer 4

我遇到了这个错误，我认为问题出在* ngIf。这是我的mat-menu

 <mat-menu #menu="matMenu" *ngIf="user.userType==2">
    <button mat-menu-item><a>Profile</a></button>
    <button mat-menu-item><a>Settings</a></button>
 </mat-menu>
 <button mat-raised-button *ngIf="user.userType==2" [matMenuTriggerFor]="menu">Hello</button>

某种程度上让他感到困惑的是，我对材料非常了解，但是我想他不确定当一个条件成立时会发生什么... 所以我轻松地将其更改为：

<div *ngIf="user.userType==2">
 <mat-menu #menu="matMenu">
    <button mat-menu-item><a>Profile</a></button>
    <button mat-menu-item><a>Settings</a></button>
 </mat-menu>
 <button mat-raised-button [matMenuTriggerFor]="menu">Hello</button>
</div>

错误错误：mat-menu-trigger：必须通过mat-menu实例

4 个答案: