如何使用动态参考angular2传递元素？

Question

I have elements inside ngFor loop. Each elements get reference like this #f{{floor}}b . As you see floor is a variable. I want to pass these elements to a function. Code:

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

I tried this but it only pass a string like this f5b not the element itself:

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

Full code:

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

floor is a number and floors is an array of numbers.

Answer 1

It is okay to have same template variable name inside *ngFor , no need to make unique template variable name inside *ngFor .

Html

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

Even by having similar template name, you can query the DOM using @ViewChildren decorator.

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

Answer 2

Just use the same variable

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

or use $event.target/currentTarget