Question

我有一张桌子，想在用户单击一行时显示上下文菜单。但是，即使我将鼠标位置值分配给X和Y，当前上下文菜单也会显示在左上角。

以下一些代码段可帮助您了解我的工作：

HTML

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr
        mat-row
        routerLink="/ticket-details/{{ row.id }}"
        *matRowDef="let row; columns: displayedColumns"
        (contextmenu)="onContextMenu($event, row)"
      >
        <div
          style="position: absolute"
          [style.left.px]="contextMenuPosition.x"
          [style.top.px]="contextMenuPosition.y"
          [matMenuTriggerFor]="contextMenu"
          [matMenuTriggerData]="{ row: Ticket }"
        ></div>
      </tr>

组件

  @ViewChild(MatMenuTrigger)
  contextMenu: MatMenuTrigger;

  contextMenuPosition = { x: '0px', y: '0px' };

onContextMenu(event: MouseEvent, ticket: Ticket) {
    event.preventDefault();
    console.log(event.clientX  + ',' + event.clientY + ',' + ticket.subject);
    this.contextMenuPosition.x = event.clientX + 'px';
    this.contextMenuPosition.y = event.clientY + 'px';
    this.contextMenu.menuData = { ticket : Ticket };
    this.contextMenu.openMenu();
  }

控制台日志显示，具有正确值的正确数据已通过。我以this example为灵感，它可以正常工作，并且还具有我的出于某些原因而没有的动画。

我尝试删除组件中的“ px”部分或将[style.left.px]更改为[style.left]，但无济于事。

我们将不胜感激！

Answer 1

在摆弄更多内容后自己修复了它。在写这个问题之前应该已经考虑过这一点。

X / Y坐标是字符串类型，在我删除了“ px”附录并使用了[style.left.px]之后，它也像动画一样具有魅力

上下文菜单未出现在正确的位置（角度）

1 个答案: