Невозможно прочитать свойство 'open' из undefined - меню в машинописи

Question

У меня проблема с действием в моем меню. Я использовал материал меню и иконки для этого проекта. Код расширенного меню выглядит следующим образом:

<mat-menu #rootMenu="matMenu" [overlapTrigger]="false">
  <ng-template matMenuContent let-element="element">
    <div *ngFor='let item of contextMenu' (click)="item.action(element)">
      <button *ngIf='!item.seperator' mat-menu-item [disabled]="item.disabled">
        <mat-icon>
          {{item.icon}}
        </mat-icon>
        <span>
          {{item.name}}
        </span>
      </button>
      <mat-divider *ngIf='item.seperator'></mat-divider>
    </div>
  </ng-template>
</mat-menu>

Теперь я покажу вам свою модель элемента меню:

export class MenuElement {
  id?: string
  name?: string
  tooltip?: string
  icon?: string
  action: (element : any) => void
  disabled?: boolean = true
  seperator?: boolean = false
}

И, наконец, часть меню в компоненте ts:

 constructor(public dialog: MatDialog) {      //#1
 ...
 this.contextMenu = 
 ...
 {
        name: 'Rename',
        icon: 'edit',
        action: this.openRenameDialog,
        disabled: true
 },
 ...

И функция openRenameDialog:

  openRenameDialog(element: FileElement) {
    let dialogRef = this.dialog.open(RenameDialogComponent);
    dialogRef.afterClosed().subscribe(res => {
      if (res) {
        element.name = res;
        this.elementRenamed.emit(element);
      }
    });
  }

И, наконец, это моя ошибка:

core. js: 5828 ОШИБКА TypeError: Не удается прочитать свойство 'open' не определено в Object.openRenameDialog [как действие] (lib-common. js: 4857) в FileExplorerComponent_ng_template_8_div_0_Template_div_click_0_listener (lib-common. js: 4550) в executeListenerWithEr: wrapListenerIn_markDirtyAndPreventDefault (core. js: 21635) в HTMLDivElement. (платформа-браузер. js: 934) в ZoneDelegate.invokeTask (zone-evergreen. js: 400) в Object.onInvokeTask (core. js: 40744) в ZoneDelegate.invokeTask (zone-evergreen. * 1032) *: 399) в Zone.runTask (zone-evergreen. js: 168) в ZoneTask.invokeTask [as invoke] (zone-evergreen. js: 481)

Любые идеи, какие мне нужно сделать?

Редактировать 1

Введено диалоговое окно, смотрите # 1

Answer 1

Попробуйте изменить синтаксис метода "openRenameDialog" на

openRenameDialog = (element: FileElement) => {
    // etc 
}

Это, вероятно, происходит потому, что когда вы присваиваете action: this.openRenameDialog, привязка к this нацеливается на контекст метода вместо контекст класса (где фактически определяется диалоговое окно).

В более старых версиях JS вам потребуется использовать bind для ссылки на правильный контекст. Однако с включением «толстых стрелок» в ES6 эта привязка автоматически выполняется для вас.