时间戳

首页 > 解决方案 > 忘记如何处理模型中的动作点击

angular - 忘记如何处理模型中的动作点击

问题描述

我为我的按钮列表创建了模型：

export class MenuElement {
  id?: string
  name: string
  tooltip: string
  icon: string
  action: void
}

并创建了简单的菜单：

constructor() {
    this.menu = [
      {
        id: '0',
        name: '',
        tooltip: 'Open in Mark',
        icon: 'launch',
        action: this.test()
      }
    ]
  }

我在角度暂停后忘记了如何在 html 中链接动作，这种方式不起作用：

<div *ngFor='let item of menu'>
    <div class="button" [title]="item.tooltip" (click)="item.action">
      <mat-icon>
        {{item.icon}}
      </mat-icon>
    </div>
  </div>

测试功能只是控制台记录完成。有人可以提醒我怎么做吗？我在网上找不到解决方案

标签： angulartypescript

解决方案

在您的模型对象menu中，您引用操作方法的结果，但它应该是方法本身

相应地改变它：

constructor() {
    this.menu = [
      {
        id: '0',
        name: '',
        tooltip: 'Open in Mark',
        icon: 'launch',
        action: this.test
      }
    ]
  }

在您的模板中（感谢@Miri Gold）：

<div class="button" [title]="item.tooltip" (click)="item.action()">

在你的模型中：

action: () => void

推荐阅读