angular - Mat菜单总是出现在浏览器的左上角

Question

我正在使用 Angular 12.0.2 和 Angular Material 12.2.11。当我右键打开mat菜单时，菜单总是出现在浏览器的左上角。我希望菜单出现在用户右键单击的位置（在数据网格中的项目上）。

部分html-

      <mat-drawer-content>
        <div style="height: 500px;">
          <mat-table [dataSource]="this.backlogservice.backlogIssues" class="mat-elevation-z8" cdkDropList #tablebacklog
            #listbacklog="cdkDropList" [cdkDropListData]="this.backlogservice.backlogIssues" cdkDropList
            [cdkDropListConnectedTo]="this.getConnected()" style="cursor: move"
            (cdkDropListDropped)="drop($event, null)" id="tablebacklog">
            <ng-container matColumnDef="task" style="width: 10%">
              <mat-header-cell *matHeaderCellDef> Task </mat-header-cell>
              <mat-cell *matCellDef="let element">
                <mat-icon (click)="showTasks(element)" style="cursor: pointer; color: #F70000;">exit_to_app</mat-icon>
              </mat-cell>
            </ng-container>

            <ng-container matColumnDef="orderby" style="width: 10%">
              <mat-header-cell style="font-weight: bold;" *matHeaderCellDef> No. </mat-header-cell>
              <mat-cell *matCellDef="let element; let i=index"> {{i}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="title" style="width: 40%">
              <mat-header-cell style="font-weight: bold;" *matHeaderCellDef> Title </mat-header-cell>
              <div style="visibility: hidden; position: fixed" [matMenuTriggerFor]="sendToMenu">
                <mat-cell *matCellDef="let element" (contextmenu)="onRightClick($event, {content: element})">
                  {{element.title}} </mat-cell>
              </div>
            </ng-container>

组件文件-

            export class BacklogComponent implements OnInit {
               @ViewChild(MatMenuTrigger) matMenuTrigger!: MatMenuTrigger;
               
              constructor(
                private dataSvc: DataService,
                private kc: KeycloakService,
                public backlogservice: BacklogService,
                public _issueService: IssuesService,
                private changeDetectorRef: ChangeDetectorRef,
                public sprints: SprintService,
                public modalService: ModalService
              ) { 
                
              }   

          onRightClick(event: MouseEvent, item: any) { 
            // preventDefault avoids to show the visualization of the right-click menu of the browser 
            event.preventDefault(); 

            // we record the mouse position in our object 
            this.menuTopLeftPosition.x = event.pageX + 'px'; 
            this.menuTopLeftPosition.y = event.pageY + 'px'; 

            // pass object data to the menu
            this.matMenuTrigger.menuData = {item: item} 

            // open the menu 
            this.matMenuTrigger.openMenu(); 

            } 
        }

我怎样才能解决这个问题？

标签： angulartypescriptangular-material