Блог

Я использую Angular 12.0.2 с угловым материалом 12.2.11. Когда я щелкаю правой кнопкой мыши, чтобы открыть меню, меню всегда появляется в левом верхнем углу браузера. Я хочу, чтобы меню отображалось там, где пользователь щелкает правой кнопкой мыши (по элементам в таблице данных).

Часть html-

 lt;mat-drawer-contentgt;  lt;div style="height: 500px;"gt;  lt;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"gt;  lt;ng-container matColumnDef="task" style="width: 10%"gt;  lt;mat-header-cell *matHeaderCellDefgt; Task lt;/mat-header-cellgt;  lt;mat-cell *matCellDef="let element"gt;  lt;mat-icon (click)="showTasks(element)" style="cursor: pointer; color: #F70000;"gt;exit_to_applt;/mat-icongt;  lt;/mat-cellgt;  lt;/ng-containergt;   lt;ng-container matColumnDef="orderby" style="width: 10%"gt;  lt;mat-header-cell style="font-weight: bold;" *matHeaderCellDefgt; No. lt;/mat-header-cellgt;  lt;mat-cell *matCellDef="let element; let i=index"gt; {{i}} lt;/mat-cellgt;  lt;/ng-containergt;   lt;ng-container matColumnDef="title" style="width: 40%"gt;  lt;mat-header-cell style="font-weight: bold;" *matHeaderCellDefgt; Title lt;/mat-header-cellgt;  lt;div style="visibility: hidden; position: fixed" [matMenuTriggerFor]="sendToMenu"gt;  lt;mat-cell *matCellDef="let element" (contextmenu)="onRightClick($event, {content: element})"gt;  {{element.title}} lt;/mat-cellgt;  lt;/divgt;  lt;/ng-containergt;  

Файл компонента-

 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();    }   }  

Как я могу это исправить?