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

Question

我有一个 angular 组件具有这种模板变量名

#name_{{i}}

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

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

现在，我不能这样通过

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

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

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

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

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

Answer 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]);
 }

Answer 2

您不需要这样做。

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

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

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

你可以这样写：

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

希望对您有所帮助:)

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

Dynamic template variable inside event binding

event-binding

angular