Angular ngFor 单个项目事件答案

【问题标题】：Angular ngFor individual item eventsAngular ngFor 单个项目事件
【发布时间】：2019-01-16 01:27:15
【问题描述】：

打字稿：

showText: boolean = false;

  hoverStateIn(){
    this.showText = true
  }

  hoverStateOut(){
    this.showText = false;
  }

HTML

<ul> 
<li class="txt-block"
    *ngFor='let fruit of fruitsToDisplay;let i = index'>
  <div class="form-control">
      <input type='text' (mouseenter)="hoverStateIn()" (mouseleave)="hoverStateOut()" id = 'frt'+i name='fruit'/>
      <span *ngIf = 'showText'> {{fruit}} </span>
    </li>
 </ul>

这里我们使用 ngFor 动态获取文本框。当文本框中发生 mouseenter 时，我想显示相应的 Span 元素。

但是，每当我将鼠标输入到特定的文本框时，都会显示所有 span 元素。请帮助解决问题。

【问题讨论】：

每个fruit 都需要一个showText 属性，可以作为fruit 对象的属性，也可以在单独的数组中
@user184994 任何演示都将不胜感激。
stackblitz.com/edit/angular-thcrnk
@Pearl 演示使用指令。可能对你有帮助。 stackblitz.com/edit/…

标签： jquery asp.net angular typescript

【解决方案1】：

您实际上可以使用 CSS 来做到这一点，这可能更简单。它还减少了在 TS 代码中维护 hover 状态的需要，因此您可以删除 (mouseenter) 和 (mouseleave) 绑定。

默认设置为display: none:

input + span {
  display: none;
}

当input处于hover状态时，显示span

input:hover + span {
  display: inline-block;
}

您可能希望为 span 提供一个有用的类名，而不是仅在 CSS 规则中使用 span，但这取决于您

Here is a demo on StackBlitz

【讨论】：

【解决方案2】：

问题是您的 mouseenter 处理程序和您需要显示的跨度之间没有绑定，这需要是一对一的关系，而在您的情况下，它是一对多的关系。更改代码以解决此问题如下所示：

showText: Array<boolean> = this.fruitsToDisplay.map(value => false);

  hoverStateIn(index){
    this.showText[index] = true
  }

  hoverStateOut(index){
    this.showText[index] = false;
  }

<ul> 
<li class="txt-block"
    *ngFor='let fruit of fruitsToDisplay;let i = index'>
  <div class="form-control">
      <input type='text' (mouseenter)="hoverStateIn(i)" (mouseleave)="hoverStateOut(i)" id = 'frt'+i name='fruit'/>
      <span *ngIf = 'showText[i]'> {{fruit}} </span>
    </li>
 </ul>

【讨论】：

【解决方案3】：

showText 需要使用 index

 showText: any = [];

  hoverStateIn(index){
    this.showText[index] = true;
  }

  hoverStateOut(index){
    this.showText[index] = false;
  }

<ul> 
<li class="txt-block"
    *ngFor='let fruit of fruitsToDisplay;let i = index'>
  <div class="form-control">
      <input type='text' (mouseenter)="hoverStateIn(i)" (mouseleave)="hoverStateOut(i)" id = 'frt'+i name='fruit'/>
      <span *ngIf = 'showText[i]'> {{fruit}} </span>
    </li>
 </ul>

这里是stackblitz代码https://stackblitz.com/edit/angular-yh1cd4

【讨论】：