创建addEventListener时在函数中传递* ngFor值

时间:2018-09-25 21:58:37

标签: javascript angular

我正在下面创建事件监听器,我不知道如何将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中函数的参数。

有什么建议吗?谢谢

0 个答案:

没有答案