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

Question

我正在尝试重建我的context menu（今天是第2部分）。现在我有亩文件元素的不确定值的问题。我不能因此删除，重命名或其他任何内容。

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)"传递到底部的菜单会失败。也许有人知道这个问题？

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>