悬停在垫卡上

Question

如何通过卡在 hover 上显示 mat-card-action。 当我在一张卡片上使用 hover 时，它会显示每张卡片的动作。

 <mat-card (mouseover)="hover=true" (mouseleave)="hover=false" [className]="flashcard.privatno ? 'privatno' : 'javno'" *cdkVirtualFor = "let flashcard of flashcards; let i = index" (click)="loadOne(i)">
      <mat-card-content>
        <p>{{seci(flashcard.pitanje)}}</p>
      </mat-card-content>
      <mat-card-actions >
        <button mat-button *ngIf="hover==true">LIKE</button>
      </mat-card-actions>
[Hovering over first card. It should show only LIKE on that card and not on the other][1]


  [1]: https://i.stack.imgur.com/36Bsp.png

Answer 1

当您说*ngIf="hover==true"时，您将 for 循环的所有元素与相同的变量进行比较，这就是为什么所有元素将同时显示/隐藏的原因。 您需要一种方法来区分每个元素。 如果你的抽认卡项目有一个 id，你可以尝试这样的事情：

.html：

<mat-card (mouseover)="toggleHover(flashcard.id)" (mouseleave)="removeHover()" [className]="flashcard.privatno ? 'privatno' : 'javno'" *cdkVirtualFor = "let flashcard of flashcards; let i = index" (click)="loadOne(i)">
      <mat-card-content>
        <p>{{seci(flashcard.pitanje)}}</p>
      </mat-card-content>
      <mat-card-actions >
        <button mat-button *ngIf="hoveredElement === flashcard.id ">LIKE</button>
      </mat-card-actions>
</mat-card>

.ts

public hoveredElement:any;

toggleHover(id) {
  this.hoveredElement = id
}

removeHover() {
  this.hoveredElement = null;
}