事件绑定中的动态模板变量答案

【问题标题】：Dynamic template variable inside event binding事件绑定中的动态模板变量
【发布时间】：2020-04-28 00:32:18
【问题描述】：

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

#name_{{i}}

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

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

现在，我不能这样通过它

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

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

在事件绑定中传递插值会导致我出现这个错误：

解析器错误：在预期表达式的位置得到插值 ({{}})

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

【问题讨论】：

你能发布整个元素吗？什么名字_？你试过(click)="myFunction({{ 'name_' + i }})"
困扰编译器的是我在事件绑定的函数调用中使用插值 {{}}；据我所知，实际上不应该这样做。我一直在寻找替代方法

标签： angular event-binding

【解决方案1】：

您可以使用@ViewChildren

//Html
<element *ngFor="let each of all" (click)="myFunction(i)" #myElement></element>

//TS
 @ViewChildren('myElement') myElementList: QueryList<YourType>;

 myFunction(ind) {
  console.log(this.myElementList.toArray()[ind]);
 }

【讨论】：

谢谢，不幸的是，这个解决方案对我不起作用

【解决方案2】：

你不需要这样做。

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

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

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

你可以这样写：

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

希望对你有帮助:)

【讨论】：