web-dev-qa-db-fra.com

Comment ouvrir le menu mat par programme?

Im essayant de déclencher l'ouverture d'un menu en cliquant sur l'élément 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);
}

J'ai essayé de regarder ce problème sur github qui est plus proche de ma situation. mais dans mon cas, j'ai une liste dynamique d'éléments que je voulais ouvrir un menu à chaque clic.

DEMO

angulartypescriptangular-material2
12
Roel

Vous devez obtenir l'instance de MatMenuTrigger à partir de [matMenuTriggerFor] élément

#menuTrigger="matMenuTrigger"  [matMenuTriggerFor]="menu"

où

  • #menuTrigger est la variable de référence du modèle

  • matMenuTrigger est exportAs propriété des métadonnées MatMenuTrigger

puis appelez simplement

(click)="menuTrigger.openMenu()"

exemple Stackblitz

En savoir plus sur la variable de référence du modèle ici

26
yurzui