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

Question

我在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是一个数字数组。

Answer 1

可以在内部具有相同的模板变量名称*ngFor，而无需在内部创建唯一的模板变量名称*ngFor。

HTML

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

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

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