如何通过动态参考angular2传递元素？答案

【问题标题】：How to pass element with dynamic reference angular2?如何通过动态参考angular2传递元素？
【发布时间】：2017-11-10 15:00:56
【问题描述】：

我在ngFor 循环中有元素。每个元素都得到这样的引用#f{{floor}}b。如您所见，floor 是一个变量。我想将这些元素传递给一个函数。代码：

<button #f{{floor}}b (click)="onClick(f{{floor}}b)"></button>

我试过了，但它只传递了这样的字符串 f5b 而不是元素本身：

<button #f{{floor}}b (click)="onClick('f'+floor+'b')"></button>

完整代码：

<div *ngFor="let floor of floors">
  <button #f{{floor}}b (click)="onClick('f'+floor+'b')"></button>
</div>

floor 是一个数字，floors 是一个数字数组。

【问题讨论】：

【解决方案1】：

*ngFor内部可以有相同的模板变量名，*ngFor内部不需要唯一的模板变量名。

HTML

<div *ngFor="let floor of floors">
  <button #fb (click)="onClick(fb)"></button>
</div>

即使具有相似的模板名称，您也可以使用@ViewChildren 装饰器查询 DOM。

@ViewChildren('fb') fbButtons:QueryList<any>;

【讨论】：

【解决方案2】：

只需使用相同的变量

<div *ngFor="let floor of floors">
  <button #btn (click)="onClick(btn)"></button>
</div>

或使用$event.target/currentTarget

【讨论】：