Question

如何在将鼠标悬停在卡片上时显示垫式卡片动作。当我将鼠标悬停在一张卡上时，它将显示每张卡的操作。

 <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;
}

将鼠标悬停在席卡上

1 个答案: