Question

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

如果模板位于ngFor内，则无法采用这种方式。当您将鼠标悬停在任何动态生成的元素上时，它将触发每个显示/隐藏。因此，我的问题是，如何使用Angular star指令在* ngFor-动态生成的模板元素上使事件同等动态，以便当我将鼠标悬停在其相应事件上的那些模板元素之一上时发出该消息？更具体地说，（请参见下面的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

整个列表只有一个变量，这就是为什么每一行都会触发它。相反，您应该具有每行工具提示可见性的列表。选中此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;
  }

Answer 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

角度6：在* ngFor-动态生成的模板元素上使事件同样动态

2 个答案: