Angular 2中的ngfor模板和函数中的参数不起作用

Question

我让this plunkr向你展示我想要的东西。

实际上第一部分运作良好，但当我想把它放在ngfor，没有任何工作按预期。

什么工作：

<div>
  <button (click)="showDownloadLink(link1)" flex="auto">CLICK ON ME SENPAI ! </button>
  <a id="test_link" #link1 href="" (mouseover)="in()" (mouseout)="out()" hidden> Jquery should execute on hover </a>
</div>

<div>
  <button (click)="showDownloadLink(link2)" flex="auto">CLICK ON ME SENPAI 2 ! </button>
  <a id="test2_link" #link2 href="" (mouseover)="in()" (mouseout)="out()" hidden> Jquery  2should execute on hover </a>
</div>

什么不起作用：

<div *ngFor="#link of links">
  <button (click)="showDownloadLink(link)" flex="auto">CLICK ON ME SENPAI ! </button>
  <a id="test_link" #link href="{{link}}" (mouseover)="in()" (mouseout)="out()" hidden> Jquery should execute on hover </a>
</div>

有任何想法吗？

编辑：两个答案都很完美，但不能同时接受

Answer 1

您应该使用以下代码：

<div *ngFor="#link of links">
  <button (click)="showDownloadLink(linkElt)" flex="auto">CLICK ON ME SENPAI ! </button>
  <a id="test_link" #linkElt [href]="link" (mouseover)="in()" (mouseout)="out()" hidden> Jquery should execute on hover </a>
</div>

在您的情况下，您有两个具有相同名称的变量：

• 对应于循环的当前元素的链接（类型字符串）
• 对应于a标记的dom元素的链接

在此级别存在冲突并且使用了字符串变量（而不是DOM元素之一）并且您遇到以下错误：

VM489 angular2.dev.js:23501TypeError: Cannot read property 'setAttribute' of undefined
 at BrowserDomAdapter.setAttribute (VM489 angular2.dev.js:23774)
 at DomRenderer.setElementAttribute (VM489 angular2.dev.js:13819)
 at DebugDomRenderer.setElementAttribute (VM489 angular2.dev.js:7283)
 at App.showDownloadLink (VM492 app.ts!transpiled:29)
 (...)

看到这个plunker：qazxsw poi。

Answer 2

https://plnkr.co/edit/NLCqRcs7ZiQi01d0o6eU?p=preview in

#link

正在影响<div *ngFor="let link of links">

#link

更改名称使其有效

<a id="test_link" #link 

  <button (click)="showDownloadLink(linkx)" flex="auto">CLICK ON ME SENPAI ! </button>
  <a id="test_link" #linkx href="{{link}}" (mouseover)="in()" (mouseout)="out()" hidden> Jquery should execute on hover </a>