Angular 5 Matmenutriggerfor

时间:2018-12-07 12:39:33

标签: angular5

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

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>

1 个答案:

答案 0 :(得分: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