Angular 5 Matmenutriggerfor

Question

我正在尝试为电子商务创建动态菜单，但出现此错误：

Error: mat-menu-trigger: must pass in an mat-menu instance!

有人知道如何解决此错误吗？
我该如何动态[matMenuTriggerFor]和#main_menu？

我的名单上有多家商店！就这么简单。
仅需要动态格式的这两个attr。

<button mat-button [matMenuTriggerFor]="i" *ngFor="let shop of shopey; let 
i=index">{{shop.name}}
</button>
<mat-menu #main_menu="matMenu">
 <ng-container *ngFor="let shop of shopey">
 </ng-container>
</mat-menu>

Answer 1

尝试以下操作...

将*ngFor循环移动到跨接包装器

 <span *ngFor="let shop of shopey; let i=index">

然后将#main_menu更改为#i

<span *ngFor="let shop of shopey; let i=index">
 <button mat-button [matMenuTriggerFor]="i" >{{shop.name}}
 </button>
 <mat-menu #i="matMenu">
  <ng-container>
    this is a test of the container
  </ng-container>
 </mat-menu>
</span>

Stackblitz

https://stackblitz.com/edit/angular-wu6dl4?embed=1&file=app/menu-overview-example.ts