如何在 ngStyle 中为特定项目使用 ngFor 索引？

Question

我有这些代码行

<div class="picture"
           *ngFor="let item of data?.slice(0, data.length / 3); index as i">
        <div class="shadow"
             (mouseenter)="showShadow()"
             (mouseleave)="hideShadow()"
             [ngStyle]="{'background-color': shadow}">
          <img src="{{item.urls.small}}" alt="">
        </div>
      </div>

它工作正常，但问题是我无法解决如何让特定 div 的阴影可见，而不是在鼠标进入时对所有的阴影可见。就像它在 unsplash

上的实现方式一样

TS文件

shadow = 'rgba(0, 0, 0, 0)';

showShadow(): void {
    this.shadow = 'rgba(0, 0, 0, 0.3)';
  }

  hideShadow(): void {
    this.shadow = 'rgba(0, 0, 0, 0)';
  }

如果有人需要，还有 SCSS 文件

.picture {
      margin: 8px;

      .shadow {
        position: relative;
        width: inherit;
        height: inherit;

        img {
          position: relative;
          z-index: -1;
        }
      }
    }

Answer 1

在这里指令是你的朋友。这是 Attribute Directives 的典型 use-case。不要使用 [ngStyle] 和 (mouseenter)、(mouseleave)，而是使用指令。

上述指令 class 看起来像这样。（原样从 Angular 文档中复制）。

指令

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

你的元素将是：

<div appHighlight>
    <img ..... >
</div>

Answer 2

Sachin 给出了一个很好的方法。但我只是想指出，在您当前的方法中，将 [ngStyle]="{'background-color': shadow}" 放在 div 上意味着 shadow 的 background-color 将始终应用于 div 无论鼠标在哪里，因为没有附加条件何时应用 'background-color': shadow.

像这样将 boolean 添加到您的 TS 文件，

shouldShowShadow: boolean = false; // I know this variable name is a mouthful, but it's all I could think of off the top of my head.

shadow = 'rgba(0, 0, 0, 0)';

showShadow(): void {
    this.shadow = 'rgba(0, 0, 0, 0.3)';
    this.shouldShowShadow = true;
  }

  hideShadow(): void {
    this.shadow = 'rgba(0, 0, 0, 0)';
    this.shouldShowShadow = false;
  }

并在 ngStyle 中使用它来确定何时显示阴影，方法是

<div class="shadow"
             (mouseenter)="showShadow()"
             (mouseleave)="hideShadow()"
             [ngStyle]="{'background-color': shouldShowShadow ? 'shadow' : 'transparent'}">
          <img src="{{item.urls.small}}" alt="">
</div>

应该可以。

如何在 ngStyle 中为特定项目使用 ngFor 索引？

How to use ngFor index in ngStyle for specific item?

ng-style

ngfor

angular

指令