angular - 事件绑定(bind)中的动态模板变量

Question

我有一个带有这种模板变量名的 Angular 组件

#name_{{i}}

在 *ngFor 中，这样生成的任何组件都有不同的变量名。 我需要将整个变量(不是作为字符串，作为对模板变量的引用)传递给同一个 *ngfor 中按钮事件绑定(bind)中的函数，就像这样

(click)="myFunction(name_{{i}})"

现在，我不能这样通过了

(click)="myFunction('name_'+i)"

因为 myFunction 不希望字符串作为变量，而是模板变量引用。

在事件绑定(bind)中传递插值会导致我出现此错误:

Parser Error: Got interpolation ({{}}) where expression was expected

由于变量是动态的，如何在不使用插值的情况下将模板变量传递给函数？

Answer 1

您不需要这样做。

您不必为每个实例生成一个名称，甚至不必使用@viewChildren。

您可以为 ngFor 生成的每个元素使用相同的引用名称。

事实上，引用调用会自动附加到它在 *ngFor 循环指令内生成的引用变量(它就像传递给 ngFor 指令的模板内的作用域)

你可以这样写:

<div #item *ngFor="let item of list" (click)="myFunction(item)"></div>

希望对您有所帮助:)