Angular 中 HTML 迭代时动态 onClick 无效函数

Question

我想知道是否可以在一个对象中设置一些值为 void 函数的项目，因此一旦这个对象在 HTML 中迭代，单击我就可以触发这些方法功能。

假设我有两种方法

public method1():void{
   ...do something
},

public method2():void{
   ...do something
}

然后我创建一个对象，其中包含 this 类型为 void 的方法：

const objArray=[
  {click:this.method1()},
  {click:this.method2()}
]

那么这个想法就是迭代 HTML 中的这个对象数组并触发它的功能

HTML

<ul >
    <span *ngFor="let item of objArray">
      <a
        (click)="(item.click)"
      > 
      </a>
    </span>
</ul>

在这种方法中，正如预期的那样，每个项目的值都是未定义的，因此我尝试将方法数组修改为：

const objArray=[
  {click:()=>this.method1()},
  {click:()=>this.method2()}
]

仍然没有触发任何东西。我该如何改进呢？提前致谢！

Answer 1

TLDR 你忘了在 html

中加上括号

<ul>
  <span *ngFor="let item of objArray">
    <a (click)="item.click()">Click Me</a>
  </span>
</ul>

您可以这样写，以分配对方法的引用：

通过这种方式，方法中对 this 的任何使用都将引用新对象而不是您的组件

const objArray=[
  { click: this.method1 },
  { click: this.method2 }
]

或者这样创建一个执行方法的新函数：

这样，方法里面的this就会引用你的组件

const objArray=[
  { click: () => this.method1() },
  { click: () => this.method2() }
]

但是无论哪种情况，您都忘记了在 html（无括号）

中实际调用该函数

<ul>
  <span *ngFor="let item of objArray">
    <a (click)="item.click()">Click Me</a>
  </span>
</ul>

Dynamic onClick over void functions on iteration from HTML in Angular