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>

在你的例子中，你有两个同名的变量：

link 对应于循环的当前元素（字符串类型）
link 对应于 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)
 (...)

看到这个 plunkr：https://plnkr.co/edit/NLCqRcs7ZiQi01d0o6eU?p=preview。

Answer 2

#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>

Plunker example

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

ngfor template in Angular 2 and argument in function is not working

angular2-template

angular