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>

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

1 个答案: