角度ng对于单个项目事件

Question

打字稿：

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元素都会显示出来。 请帮助解决问题。

Answer 1

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

默认情况下，将其设置为display: none ：

input + span {
  display: none;
}

当input处于hover状态时，然后显示跨度

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

您可能想给span一个有用的类名，而不是仅在CSS规则中使用span ，但这取决于您

这是StackBlitz上的演示

Answer 2

您需要为showText使用索引

 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

Answer 3

问题在于，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>