角度2表行悬停显示悬停行上的按钮

Question

我坚持使用on-mouseover事件来显示行上的隐藏编辑按钮.使用此方法,它将显示每行上的所有编辑按钮.我在AngularJs 1x中工作只是因为ng-mouseenter在每个tr元素中设置了一个范围.然而,角度2不是这种情况.

<table>
   <tr *ngFor="let ob of objects" on-mouseover="rowHovered=true" on-mouseleave="rowHovered=false">
     <td>{{ob.name}}</td>
     <td>
        <button *ngIf="rowHovered==true">edit</button>
     </td>
  </tr>
</table>

Answer 1

尝试存储悬停的索引:

<table on-mouseleave="hoveredIndex=null">
   <tr *ngFor="let ob of objects; let index=index" on-mouseover="hoveredIndex=index">
     <td>{{ob.name}}</td>
     <td>
        <button *ngIf="index==hoveredIndex">edit</button>
     </td>
  </tr>
</table>