I am currently working on rebuilding my context menu for the second time today. I am encountering an issue with an undefined value of my file element, which is preventing me from deleting, renaming, or performing any other actions.
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>
Typescript
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);
}
Prior to making changes to my previously implemented context menu, the delete action was functional. I suspect there may be a problem with passing `(contextmenu)="onContextMenu($event, element)"` to the mat-menu at the bottom. Perhaps someone has encountered this issue before?