首页 文章

Angular 6：在* ngFor-dynamic-generated-template-elements上使事件具有同等动态

提问于
浏览 次
0

通常在Angular中显示和隐藏事物我在组件中创建变量，在切换该变量的元素上创建mouseover-mouseout事件，并将ngIf放在我想要受该事件影响的任何元素上（显示/隐藏） .

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


}
html angular typescript ngfor

2 回答

  • 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

    回复于
  • 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;
  }
    回复于

相关问题