Лучший способ стиля при наведении курсора мышью Angular

Question

Я имею дело со следующей проблемой:

Как видите, все мои элементы используют наведение мыши вместо одного. Есть способ с массивами в этом потоке, но я не знаю, подходит ли он мне лучше.

Вот мой код компонента. Я использую *ngFor для генерации всех необходимых элементов, а с помощью событий (mouseover) и (mouseend) меняю стиль изображения на css display: none и css display: block.

component. html

<div class="container-dratini">
  <ng-container *ngFor="let auto of autos">
    <div
      [id]="auto.submarca"
      class="card-cuadro"
      (mouseover)="onMouseOver()"
      (mouseout)="onMouseOut()"
      #cardCuadro
    >
      <header>{{ auto.submarca }} - {{ auto.marca }}</header>
      <div class="text-info" [style.display]="displayText">
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
        ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
        egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
        leo.
      </div>
      <img
        class="item item-img"
        src="/assets/images/autos/{{ auto.submarca }}.png"
        alt=""
        #img
        (error)="setImageOnError(img)"
        [style.display]="displayImage"
      />
    </div>
  </ng-container>
</div>

component.ts

export class CuadrosComponent implements OnInit {
  autos: any;
  constructor() {}
  displayText: string;
  displayImage: string;
  ngOnInit() {
    this.autos = AUTOS;
    this.displayImage = "block";
    this.displayText = "none";
  }

  onMouseOver() {
    this.displayText = "block";
    this.displayImage = "none";
  }

  onMouseOut(auto, cardCuadroTag) {
    this.displayText = "none";
    this.displayImage = "block";
  }

  setImageOnError(img) {
    img.src = "/assets/images/autos/not-found.png";
  }
}

Answer 1

У вас есть один компонент, который отображает несколько элементов, которые вы хотите индивидуально оформить. Но для этого вы используете одну переменную экземпляра, совместно используемую всеми этими дочерними элементами.

Наиболее интуитивным решением было бы создание компонента, который отображал бы один блок и обрабатывал события мыши.

Другим решением было бы использование словаря, чтобы узнать, какой элемент должен быть стилизован по-другому, например:

export class CuadrosComponent implements OnInit {
  hoveredComponents: {[id: string]: boolean};
  //...
  onMouseOver(id: string) {
    this.hoveredComponents[id]=true;
  }

  onMouseOut(id: string) {
    this.hoveredComponents[id]=false;
  }

html:

<ng-container *ngFor="let auto of autos">
    <div
      [id]="auto.submarca"
      class="card-cuadro"
      [class.hovered]="hoveredComponents[auto.submarca]"
      (mouseover)="onMouseOver(auto.submarca)"
      (mouseout)="onMouseOut(auto.submarca)"
      #cardCuadro
    >

css :

.card-cuadro.hovered img {
    display: block;
}
.card-cuadro:not(.hovered) img {
    display: none;
}

Answer 2

Я уже принимаю решение. Получаем ссылку на мой элемент html и добавляем его дочерний массив, где находится изображение, которое нужно скрыть, и текст, который нужно показать, а затем просто меняем стиль отображения: блок и наоборот. Im noob lol.

  onMouseOver(cardCuadroTag) {
    cardCuadroTag.children["2"].style.display = "none";
    cardCuadroTag.children["1"].style.display = "block";
  }

  onMouseOut(cardCuadroTag) {
    cardCuadroTag.children["2"].style.display = "block";
    cardCuadroTag.children["1"].style.display = "none";
  }