Show/Hide 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"]; 
    } 

}