角度2テーブルの行をホバーした行に表示するためのホバー

Question

私はon-mouseoverイベントを取得して、行に隠れた編集ボタンを表示することに固執しています。このメソッドを使用すると、各行にすべての編集ボタンが表示されます。 ng-mouseenterが各tr要素の内側にスコープを設定しているため、これはAngularJs 1xで動作しました。しかし、これは角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>