如何在角度 2 中悬停 ngfor 列表的单个列表元素时显示图像？

Question

showfavstar(val)
    {
      this.favstar = true;
    }

    <ul class="listboxtickets">
    <li class="selectlistticket" *ngFor="let fav of favlist" (mouseover)="showfavstar(fav.req_id)" (mouseleave)="hidefavstar()">
  <div class="atickname" (click)="timetracker(fav.req_id,fav.ticket_summary,fav.time_logged*60*1000)"> {{fav.ticket_summary.substring(0,20)}} </div>
      <div> {{fav.time_logged} </div>
      <div class="atickstat" [hidden]="!favstar"> <img class="staraimg" src="assets/images/star_icon.png" (click)="removefav(fav.req_id)"/> </div>
      <div class="namelinet"> <img src="assets/images/text_bottomline.png"/> </div>
    </li>
  </ul>

我只想显示悬停列表的星图？现在我得到了所有星图

Answer 1

这无法使用您在此处使用的单个变量实现，即 favstar。

像这样尝试你的代码

<ul class="listboxtickets">
    <li class="selectlistticket" *ngFor="let fav of favlist" (mouseover)="showfavstar(fav)" (mouseleave)="hidefavstar(fav)">
        <div class="atickname" (click)="timetracker(fav.req_id,fav.ticket_summary,fav.time_logged*60*1000)"> 
            {{fav.ticket_summary.substring(0,20)}} 
        </div>
        <div> {{fav.time_logged} </div>
        <div class="atickstat" [hidden]="!fav?.Show">
            <img class="staraimg" src="assets/images/star_icon.png" (click)="removefav(fav.req_id)"/> 
         </div>
        <div class="namelinet"> <img src="assets/images/text_bottomline.png"/> </div>
    </li>
</ul>

showfavstar(fav){
    fav.Show = true;

    for(let i = 0; i < this.favlist.length; i++){
        this.favlist[i].Show = false;
    }
}
hidefavstar(val){
    fav.Show = true;

    for(let i = 0; i < this.favlist.length; i++){
        this.favlist[i].Show = true;
    }
}

如何在角度 2 中悬停 ngfor 列表的单个列表元素时显示图像？

How to show images when hovered a single list element of ngfor ulist in angular2?

javascript

ngfor

angular