Question

＆＃13;

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

＆＃13;

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

＆＃13;

我想仅显示悬停列表的星形图像？现在我得到所有的星形图像

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

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

1 个答案: