Элемент файла в контекстном меню не определен - почему?

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)" в мат-меню внизу. Может быть, кто-нибудь знает проблему?

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>