Зависание над мат-картой - PullRequest
Новая
       6

Зависание над мат-картой

1 голос
/ 31 октября 2019

Как отобразить действие мат-карты при наведении на карту. При наведении курсора на одну карту отображается действие для каждой карты. 

 <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

1 Ответ

1 голос
/ 31 октября 2019

Когда вы говорите *ngIf="hover==true", вы сравниваете все элементы цикла for с одной и той же переменной, поэтому все они будут отображаться / скрываться одновременно. Вам нужен способ дифференцировать каждый элемент. Если у вашего элемента карточки есть идентификатор, вы можете попробовать что-то вроде этого:

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