Angular 5 个食物菜单触发器

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

Angular 5 个食物菜单触发器

Angular 5 matmenutriggerfor

angular5