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

【问题标题】：Angular 6: Making events equally dynamic on *ngFor-dynamically-generated-template-elementsAngular 6：在 *ngFor-dynamically-generated-template-elements 上使事件同样动态
【发布时间】：2018-08-17 16:34:59
【问题描述】：

通常在 Angular 中显示和隐藏内容我在组件中创建一个变量，在切换该变量的元素上创建一个 mouseover-mouseout 事件，并在我希望受该事件影响的任何元素上放置一个 ngIf（显示/隐藏）。

如果模板在 ngFor 中，则不能这样处理。当您将鼠标悬停在任何动态生成的元素上时，它将触发每个显示/隐藏。因此，我的问题是，使用 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){}


}

【问题讨论】：

你的 stackblitz 不工作
stackblitz 工作，但与您的问题无关
抱歉，更新了

标签： html angular typescript ngfor

【解决方案1】：

整个列表只有一个变量，这就是它为每一行触发的原因。相反，您应该拥有每行工具提示可见性的列表。检查这个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;
  }

【讨论】：

【解决方案2】：

试试这样的

创建空数组

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

【讨论】：