无法读取未定义的属性“打开" - 打字稿中的菜单 [英] Cannot read property 'open' of undefined - menu in typescript

问题描述

我的菜单中有操作问题.我为这个项目使用了材质菜单和图标.wain 菜单代码如下所示:

<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"><垫子图标>{{item.icon}}</mat-icon><跨度>{{项目名称}}</span><mat-divider *ngIf='item.seperator'></mat-divider>

</ng-模板></mat-menu>

现在我向您展示我的菜单元素模型:

导出类 MenuElement {id?: 字符串名称?:字符串工具提示?:字符串图标?:字符串动作:(元素:任何)=>空白已禁用?:布尔值 = 真分隔符?:布尔值 = 假}

最后，组件 ts 中的部分菜单:

 构造函数(公共对话框:MatDialog){//#1...this.contextMenu =...{name: '重命名',图标:'编辑'，动作:this.openRenameDialog，禁用:真},...

和 openRenameDialog 函数:

 openRenameDialog(element: FileElement) {让 dialogRef = this.dialog.open(RenameDialogComponent);dialogRef.afterClosed().subscribe(res => {如果(资源){element.name = res;this.elementRenamed.emit(element);}});}

最后，这是我的错误:

<块引用>

core.js:5828 错误类型错误:无法读取未定义的属性打开"在 Object.openRenameDialog [作为动作] (lib-common.js:4857)在 FileExplorerComponent_ng_template_8_div_0_Template_div_click_0_listener(lib-common.js:4550)在 executeListenerWithErrorHandling (core.js:21593)在 wrapListenerIn_markDirtyAndPreventDefault (core.js:21635)在 HTMLDivElement.(平台浏览器.js:934)在 ZoneDelegate.invokeTask (zone-evergreen.js:400)在 Object.onInvokeTask (core.js:40744)在 ZoneDelegate.invokeTask (zone-evergreen.js:399)在 Zone.runTask (zone-evergreen.js:168)在 ZoneTask.invokeTask [as invoke] (zone-evergreen.js:481)

知道我需要做什么吗?

编辑 1

对话框被注入，看#1

解决方案

尝试将openRenameDialog"方法的语法更改为

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

这可能是因为当您分配 action: this.openRenameDialog 时，对 this 的绑定针对的是方法的上下文而不是类的上下文(这就是实际定义对话框的地方).

在旧版本的 JS 中，您需要使用 bind 来引用正确的上下文.但是，由于 ES6 中包含胖箭头"，此绑定会自动为您完成.

I have issue with action in my menu. I using material menu and icons for this project. The wain menu code looks like this:

<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>

Now i show you my menu element model:

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

And at the end, part of menu in component ts:

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

And openRenameDialog function:

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

And at the end, this is my error:

core.js:5828 ERROR TypeError: Cannot read property 'open' of undefined at Object.openRenameDialog [as action] (lib-common.js:4857) at FileExplorerComponent_ng_template_8_div_0_Template_div_click_0_listener (lib-common.js:4550) at executeListenerWithErrorHandling (core.js:21593) at wrapListenerIn_markDirtyAndPreventDefault (core.js:21635) at HTMLDivElement. (platform-browser.js:934) at ZoneDelegate.invokeTask (zone-evergreen.js:400) at Object.onInvokeTask (core.js:40744) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Zone.runTask (zone-evergreen.js:168) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:481)

Any ideas what i need to do?

Edit 1

Dialog was injected, look #1

解决方案

Try changing the syntax of the "openRenameDialog" method to

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

This is probably happening because when you assign action: this.openRenameDialog, the binding to this is targeting the context of the method instead of the context of the class (which is where dialog is actually defined).

In older versions of JS you would need to use bind to reference the correct context. However, with the inclusion of "fat arrows" in ES6, this binding is automatically being done for you.

这篇关于无法读取未定义的属性“打开" - 打字稿中的菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！