Question

TypeScript：

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，但这取决于您

Here is a demo on 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>

这是堆栈闪电代码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>

角度ng对于单个项目事件

3 个答案: