如何使用动态参考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>;

Answer 2

只需使用相同的变量

x = [];
y = [];
for i = -180 : 180
    x = [x i];
    y = [y sin(i*pi/180)];
end
p = plot(x, y)
set(p, 'Color', 'red')

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