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

Question

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

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

问题已解决，显然它与材料网站中的示例无关，并且与穆罕默德解释的相反。我在菜单之前有几个按钮 [matMenuTriggerFor]="home" aaand 我没有任何 mat-menu 来引用它们。我的代码是这样的：

<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 2

我知道为时已晚，但是我遇到了同样的错误，并使用此动态菜单演示 ，对于使用angular 6及更高版本的人打开menuitem.component文件，您需要更改此设置：

  @ViewChild('childMenu') public childMenu;

对此：

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

确保您将{static：true}设为我的情况是错误的，并给我这个错误。

我希望这个帮助