Angular 6：使事件在 *ngFor-dynamically-generated-template-elements 上同样动态

Question

通常在 Angular 中显示和隐藏内容我在组件中创建一个变量，在切换该变量的元素上创建一个 mouseover-mouseout 事件，然后在我想要影响的任何元素上放置一个 ngIf通过该事件 (display/hide).

不过，如果模板在 ngFor 中，则不能这样处理。当您将鼠标悬停在任何动态生成的元素上时，它将触发每个 show/hide。因此，我的问题是，使用 Angular 星形指令如何使 *ngFor-dynamically-generated-template-elements 上的事件同样动态，以便当我将鼠标悬停在其中一个模板元素上时，会发出相应的事件？更具体地说，（请参阅下面的 stackblitz）当我将鼠标悬停在相应的模板事件上时，如何让一个工具提示出现？

人们如何解决这个问题。你能创建动态生成的变量名吗？当您有数十万行时，这甚至是一种可扩展的方法吗？可能不会。一定有办法的。

这是我的 Stackblitz 演示我在说什么。

模板：

<h1>Tool tip example</h1>
<p>
  Events on dynamically generated template from *ngFor :)
</p>
<p>
  Requirements: Make a tooltip appear with the rest of the information on hover.
</p>


<table>
  <tr>
    <th>id</th>
    <th>name</th>
    <th>gender</th>
  </tr>
  <tr *ngFor="let object of this.data.arrayOfObjects">
    <td (mouseenter)="tooltipHover=!tooltipHover" (mouseleave)="tooltipHover=!tooltipHover" class="id-pointer">
      {{object.friends.length}}
        <div *ngIf="this.tooltipHover" class="tooltip">
Tooltip:
more info here

  </div>
    </td>
    <td>{{object.name}}</td>
    <td>{{object.gender}}</td>


  </tr>


</table>

组件：

import { Component } from '@angular/core';
import {Data} from './../../data'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  tooltipHover:boolean =false;

  constructor(public data: Data){}


}

Answer 1

尝试这样的事情

创建空数组

tooltipHover=[]

<tr *ngFor="let object of this.data.arrayOfObjects; let i = index">
    <td (mouseenter)="tooltipHover[i]=!tooltipHover[i]" (mouseleave)="tooltipHover[i]=!tooltipHover[i]" class="id-pointer">
      {{object.friends.length}}
        <div *ngIf="this.tooltipHover[i]" class="tooltip">
Tooltip:
more info here    
  </div>
    </td>
    <td>{{object.name}}</td>
    <td>{{object.gender}}</td> 
  </tr>

示例：https://stackblitz.com/edit/angular-xbwxrw

Answer 2

您对整个列表只有一个变量，这就是它为每一行触发的原因。相反，您应该拥有每行工具提示可见性的列表。检查这个 stackblitz

我把你的html改成了关注

 <tr *ngFor="let object of this.data.arrayOfObjects; let i = index">
    <td (mouseenter)="onMouseEnter(i)" 
      (mouseleave)="onMouseLeave(i)" class="id-pointer">
      {{object.friends.length}}
        <div *ngIf="tooltipHover[i]" class="tooltip">
          Tooltip:
          more info here
       </div>
    </td>
    <td>{{object.name}}</td>
    <td>{{object.gender}}</td>

</tr>

还有你的component文件到这个

 tooltipHover: boolean[] = [];

  constructor(public data: Data){}

  onMouseEnter(index) {
    this.tooltipHover[index] = true;
  }

  onMouseLeave(index) {
    this.tooltipHover[index] = false;
  }

Angular 6：使事件在 *ngFor-dynamically-generated-template-elements 上同样动态

Angular 6: Making events equally dynamic on *ngFor-dynamically-generated-template-elements

html

typescript

ngfor

angular