我正在尝试为电子商务创建动态菜单,但出现此错误:
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>
答案 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