Mat-nav-list項目をクリックしたときにメニューを開くトリガーをしようとしています。
[〜#〜] html [〜#〜]
<mat-nav-list>
<mat-list-item (click)="onOpenMenu(menu)" *ngFor="let i of data">
<div mat-line>
{{ i.name }}
</div>
<p mat-line>
{{ i.email }}
</p>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
</mat-list-item>
<mat-menu #menu="matMenu">
<button mat-menu-item>View profile</button>
<button mat-menu-item>Add contact</button>
</mat-menu>
</mat-nav-list>
[〜#〜] ts [〜#〜]
onOpenMenu(menu: any): void {
// menu doesn't have any openMenu() function
// which is of course not a trigger object but a menu itself.
console.log(menu);
}
私はこれを見てみました githubの問題 これは私の状況により近いです。しかし、私の場合、クリックごとにメニューを開きたいアイテムの動的リストがあります。
[matMenuTriggerFor]
要素からMatMenuTrigger
インスタンスを取得する必要があります
#menuTrigger="matMenuTrigger" [matMenuTriggerFor]="menu"
どこで
#menuTrigger
はテンプレート参照変数です
matMenuTrigger
はexportAs
メタデータのMatMenuTrigger
プロパティです
そして、単に呼び出す
(click)="menuTrigger.openMenu()"
テンプレート参照変数の詳細はこちら