angular 2 table row hover 用于在悬停行上显示按钮

Question

我一直在获取鼠标悬停事件以在行上显示隐藏的编辑按钮。使用此方法，它将在每一行上显示所有编辑按钮。我之所以在 AngularJs 1x 中工作，是因为 ng-mouseenter 在每个 tr 元素内设置了一个范围。但是，对于 angular 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>