显示/隐藏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创建了具有相同名称的multiples spans。这是正确的方法吗？

*我正在尝试避免类中的任何其他代码。

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

}