javascript - 创建 addEventListener 时在函数中传递 *ngFor 值
问题描述
我正在下面创建事件侦听器,但我不知道如何将 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
“z”中*ngFor = "let z of data(m[m.length-1])
有描述,我想将其用作 div 的内容,但我不知道如何使用该值作为 addEventListener 中函数的参数.
有什么建议吗??谢谢你
解决方案
推荐阅读
- ruby - 如何用产量记录返回类型的方法?
- vue.js - 如何在 VSCode 中获得 .js 文件的 Vue 语法高亮显示?
- azure - .NET 5.0 Webjob 不再从自包含构建开始
- python - VectorAssembler 创建字符串值而不是原始整数
- javascript - 使用 VueJs 将数据从 api 填充到数组
- c# - 使用返回值启动未知数量的并行任务
- amazon-web-services - 如何在 AWS CLI list-objects-v2 中输出西里尔字母
- python - Tensorflow — 使用 `tf.distribute.MirroredStrategy` 时无法调用 `tf.keras.Model.add_metric`
- pyinstaller - 使用pyinstaller时如何为flask admin收集静态文件?
- html - 从英雄图像顶部的标题/导航中删除白色背景