上下文菜单上的文件元素未定义 - 为什么？

Question

我正在尝试重建我的 context menu（今天是第 2 部分）。现在我对 mu 文件元素的未定义值有疑问。因为它我不能删除，重命名或任何东西。

HTML

    <mat-list-item *ngFor="let element of fileElements" (click)="navigate(element)" (contextmenu)="onContextMenu($event, element)" >
        [...]
    </mat-list-item>
[...]
<div style="visibility: hidden; position: fixed"
    [style.left]="contextMenuPosition.x"
    [style.top]="contextMenuPosition.y"
    [matMenuTriggerFor]="contextMenuTag">
</div>
<mat-menu #contextMenuTag="matMenu">
    <ng-template matMenuContent let-item>
    <div *ngFor="let element of contextMenu">
      <button *ngIf="!element.seperator" mat-menu-item (click)="callFunction(element, item)">
        {{element.name}}
      </button>
      <mat-divider *ngIf="element.seperator"></mat-divider>
    </div>
    </ng-template>
</mat-menu>

ts

public callFunction(menu: MenuElement, file?: FileElement): void {
    console.log(file);  // <-- UNDEFINED THERE
    switch(menu.action) {
      case 'delete': {
        this.deleteElement(file);
        break;
      }
      [...]
    }
  }

private deleteElement(element: FileElement): void {
    this.elementRemoved.emit(element);
  }

在我更改 UGLY context menu 的第一个实现之前，删除操作有效。我认为通过 (contextmenu)="onContextMenu($event, element)" 传递到底部的 mat-menu 是失败的。也许有人知道这个问题？

Answer 1

首先，这是变量未命名为 item 的被遗忘事件。似乎使用示例代码进行了修改，您会发现 matMenuTriggerData 会将数据绑定到您的 ng-template.

<div style="visibility: hidden; position: fixed"
    [style.left]="contextMenuPosition.x"
    [style.top]="contextMenuPosition.y"
    [matMenuTriggerFor]="contextMenuTag"
    [matMenuTriggerData]="{item:theitemfromyourcode}" >
</div>

此外，请记住将 let-item 设置为您的变量，该变量将以某种方式在 ts 中定义。否则，该项目将绑定到 $implict.

<ng-template matMenuContent let-item="item">
[...]
</ng-template>

上下文菜单上的文件元素未定义 - 为什么？

File element on context menu is undefined - why?

contextmenu

typescript

angular