Question

有一个带有方法的类：

public add() {}
public delete(item: Ivoice) {}

以及将这些方法映射到对象内部的方法：

    this.invoices = data.map(item => {
            item.add = this.add;
            item.edit = this.delete;
            return item;
   });

然后在模板中，我尝试将方法调用为：

<div *ngFor="let item of items; let i = index">
  <span (click)="item.add(item)">
</div>

但这不起作用。

Answer 1

最简单的方法是：有一个方法：

public void executeClickOrSomething(YourType type){
    type.add(type)
}

然后您可以在模板中执行以下操作：

<div *ngFor="let item of invoices; let i = index">
  <span (click)="executeClickOrSomething(item)">
</div>

建议： 对于复杂方案，始终具有单独的方法。尽管这听起来并不复杂，但是Angular仍在开发中，因此也许他们会在将来对其进行修复...

注意： 如果您正在考虑更改原始DataSource / Array（在这种情况下），则还应该覆盖该DataSource / Array中的该元素。

Answer 2

虽然不清楚，您实际上是想实现什么，但是从技术上讲，问题出在这里：

item.add = this.add;
item.edit = this.delete;

您基本上是将功能/方法引用分配给item对象。下次您在模板中的item.add（item）上的item上调用方法时，该方法/函数将在item的范围内而不是在您的类中调用，即ItemComponent ，范围，显然是期望的行为。

您可以使用bind method来避免此问题：

item.add = this.add.bind(this);
item.edit = this.delete.bind(this);