表示/非表示DOM要素

Question

私はAngular2の小さなアプリを開発していると私は、次のコードを動作させるために作るしようとしている：何が本当に起こりません何らかの理由で

<tr *ngFor="let person of personArray" 
     (mouseenter)="remove.hidden=true" (mouseleave)="remove.hidden=false"> 
    <td> 
     <span #remove>...</span> 
    </td> 
    </tr> 

1. 。どうしたの？
2. 私はspan要素を "remove"と呼びますが、* ngForは同じ名前の複数のスパンを作成します。これは正しいアプローチですか？

*私はクラス内に追加のコードを避けようとしています。

Answer 1

マウスでテーブル行に入ると、スパンが正しく消えてしまうという問題があると思います。すぐにその隠された..

以来と呼ばmouseleaveは、ここで例を働いているされていますhttp://plnkr.co/edit/McjjDMdLIkiFGUkZ9lNu?p=preview

@Component({ 
    selector: 'my-app', 
    template: ` 
    <table> 
     <tr *ngFor="let person of personArray" 
      (mouseenter)="remove.hidden=true" (mouseleave)="remove.hidden=false"> 
      <td> 
      <span #remove>{{ person }}</span> 
      </td> 
     </tr> 
    </table> 
    ` 
}) 
export class AppComponent { 
    personArray: string[]; 

    constructor() { 

     this.personArray = ["Bob", "Alice", "Seb"]; 
    } 

}