角度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>