我正在下面创建事件监听器,我不知道如何将ngFor值设置为this.pop作为参数。
ngAfterViewInit() {
this.elementRef.nativeElement.querySelector('.spells img')
.addEventListener('mouseover', this.pop.bind(this, event));
}
这是HTML代码
<ul class= "list-unstyled row">
<li *ngFor = "let z of data(m[m.length-1]) | slice: 0 : 10; index as j" class = "list-item col-6">
<img class = "champ" src = {{z[0]}}/>
<div class = "spells">
<img src = {{z[1].spellurl}}/>
<img src = {{z[2].spellurl}}/>
<div class = "desc"></div>
</div>
</li>
</ul>
所以当我将鼠标悬停在div.spell中的图像上时,我想调用函数pop
pop(event){
//let ds = document.getElementsByClassName(".spells .desc");
let pos = event.target.getBoundingClientRect();
let newpos = "translate(" + pos.right + "px, " + pos.bottom + "px)";
console.log(newpos);
let selected = this.elementRef.nativeElement.querySelector('.spells .desc');
selected.style.display = "block";
selected.innerHTML = desc;
selected.style.transform = newpos;
}
该函数将确定div.desc的位置及其内容。我可以使用“事件”来计算位置,但是问题是selected.innerHTML
中的“ *ngFor = "let z of data(m[m.length-1])
”中的“ z”具有要用作div内容的描述,但是我不知道如何将该值用作addEventListener中函数的参数。
有什么建议吗?谢谢