Angular 7-使用*ngFor属性设置变量单击事件

Question

我想设置在(click)事件中调用的不同方法。我在ts-文件：中创建了一组字典

headerElements = [
{
descriptor: "Name",
icon: "/assets/imgs/name-32.png",
cursor: "default",
event: "null"
},
{
descriptor: "Price",
icon: "/assets/imgs/description-32.png",
cursor: "pointer",
event: "orderByPrice()"
},
{
descriptor: "Link",
icon: "/assets/imgs/timer-32.png",
cursor: "default",
event: "null"
},
{
descriptor: "Datum",
icon: "/assets/imgs/timer-32.png",
cursor: "pointer",
event: "null"
}
];

orderByPrice-方法如下：

orderByPrice() {
this.isSortedAsc = !this.isSortedAsc;
const direction = this.isSortedAsc ? "desc" : "asc";
this.gearPieces = this.gearService.getGearComponentsOrderByPrice(direction);
}

我在html-文件：中这样称呼它

<table class="table table-dark">
<thead>
<tr>
<th *ngFor="let header of headerElements">
<img src={{header.icon}} width="32" height="32" style="cursor: {{header.cursor}};" (click)="{{header.event}}"/>{{header.descriptor}}
</th>
</tr>
</thead>
</table>

不幸的是，在(click)上设置要调用的特定方法会出现以下错误：

模板解析错误：解析程序错误：得到插值(｛｛｝｝(，其中在[｛｛header.event｝｝]中的列0处应为表达式

有可能做到这一点吗？

Answer 1

一个简单的解决方案是(如果headerElements变量数据不是从服务器检索的，而是本地定义的(：

更改headerElements.event如下：

headerElements = [
{
descriptor: "Name",
icon: "/assets/imgs/name-32.png",
cursor: "default",
event: () => {return this.test1();}
},
{
descriptor: "Price",
icon: "/assets/imgs/description-32.png",
cursor: "pointer",
event: () => {return null;}
},
{
descriptor: "Link",
icon: "/assets/imgs/timer-32.png",
cursor: "default",
event: () => {return null;}
},
{
descriptor: "Datum",
icon: "/assets/imgs/timer-32.png",
cursor: "pointer",
event: () => {return this.test2('It works!');}
}
];

另外，修改HTML点击事件如下：

(click)='value.event()'

Answer 2

更新

您可以直接将函数引用附加到对象中的事件道具，而不是函数名称。所以，如果你有一个方法：

orderByPrice() {
console.log("order by price called");
}

附上参考资料，如：

headerElements = [
{
descriptor: "Price",
icon: "/assets/imgs/description-32.png",
cursor: "pointer",
event: this.orderByPrice //<---- assign the actual reference of the function
},
.
.
]

旧答案(我不知道我在想什么(

您可以为类中的方法创建引用。类似于：

orderByPrice = () => {
console.log("order by price called");
}

使用函数引用将event分配给标头元素，而不是它们的名称

创建你的对象像：

headerElements = [
{
descriptor: "Name",
icon: "/assets/imgs/name-32.png",
cursor: "default",
event: null
},
{
descriptor: "Price",
icon: "/assets/imgs/description-32.png",
cursor: "pointer",
event: this.orderByPrice //<---- assign the actual reference of the function
},
{
descriptor: "Link",
icon: "/assets/imgs/timer-32.png",
cursor: "default",
event: null // <-- as described in comments have it falsy, actual null
},
{
descriptor: "Datum",
icon: "/assets/imgs/timer-32.png",
cursor: "pointer",
event: null
}
];

让你的HTML像：

<th *ngFor="let header of headerElements">
<img src={{header.icon}} width="32" height="32" style="cursor: {{header.cursor}};" (click)="header.event && header.event()"/>{{header.descriptor}}
</th>

编辑

(根据评论(

如果角度类中的变量引用函数是正确的，则本部分包含检查和解释。

当我们添加变量作为函数引用而不是在类中添加命名函数时，我检查了组件实例。

因此，当添加命名函数时，它会出现在组件实例的原型中。但是，如果我有一个对函数的变量引用，那么变量(因此函数(会直接出现在组件实例中(这意味着代码重复(。

为了避免这种情况，我们可以将函数添加到类的原型中。

AppComponent.prototype['orderByPrice'] = (): void => {
console.log("order by price called");
}

我找不到任何其他区别。如果这不正确，我愿意接受建议、反问题和纠正我的错误。

谢谢！