Angular 使用 ElementRef 查詢列表在 hover 上顯示 div

Question

我的項目中有一個ngFor ，我想在鼠標 hover 上顯示一個 div，為此我使用@Input表示法。

我的 html 看起來像這樣：

<div class="col s12 m6" style="position: relative" *ngFor="let res of hostInfo.residents; let i = index">
   <div class="kids-container" (mouseenter)="showDeleteAction(i)" (mouseleave)="showDeleteAction(i)">
      <span>{{ res.firstName }} {{ res.lastName }}
         <br>
         <span>{{ res.relationship }}</span>
      </span>
   </div>
</div>
<div class="actions" #deleteAction>
   <a class="btn-floating btn-small waves-effect waves-light red">
      <i class="material-icons">delete</i></a>
</div>

還有我的ts

@ViewChildren('deleteAction', { read: ElementRef}) deleteAction: QueryList<ElementRef>;

showDeleteAction(i) {
   const nativeElement = this.deleteAction.toArray();
   const actionDiv = nativeElement[i].nativeElement;
   return actionDiv.style.display = actionDiv.style.display === 'block' ;
}

它根本不起作用。 關於如何做到這一點的任何想法？

Answer 1

您在這里分配了錯誤的 css。

如下使用它： -

return actionDiv.style.display = 'block'   //it will display them 

如果你想切換： -

return actionDiv.style.display = (actionDiv.style.display === 'block') ? 'none' :'block' ;   // if not showing show and if already showing then hide it .