ngfor在angular2和函数参数模板不工作

https://plnkr.co/edit/gHnKDlVwOTW5TCEvgpo6?p=preview ngfor在angular2和函数参数模板不工作

我做了一个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>

任何想法？

编辑：两个答案都可以正常使用，但不能同时接受：/

来源

2016-04-18 Slater

你为什么使用'Renderer'而不是普通的模板绑定？ –

是的，有一个原因。但无法解释为什么在这篇文章^^“看它： http://stackoverflow.com/questions/36568082/open-download-link-in-javascript-angular2/36568320？ – Slater

这真的很混乱，我不没有找到问题的根源呢......：/ – Slater

您应使用以下代替：

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

在你的情况下，你必须具有相同名称的两个变量：对应于该对应于DOM元素环路的当前元素（类型字符串）

链路

链路在a标签

有在这个级别冲突，并使用字符串变量（而不是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。

来源

2016-04-18 08:09:31

[attr.href]需要替换href吗？那个？ – Slater

你说得对。在这种情况下，这两个工作;-) –

'href'实际上是'a'标记的一个属性，因此使用属性绑定而不是属性绑定更好。我相应地更新了我的答案... –

在

<div *ngFor="let link of links">

#link被遮蔽的#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

来源

2016-04-18 08:11:27

感谢您的回复！ :)都解释了问题在哪里:) – Slater

ngfor在angular2和函数参数模板不工作

回答

相关问题