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

【问题标题】：How to use ngFor index in ngStyle for specific item?如何在 ngStyle 中为特定项目使用 ngFor 索引？
【发布时间】：2020-10-11 04:38:26
【问题描述】：

我有这几行代码

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

【问题讨论】：

标签： angular ngfor ng-style

【解决方案1】：

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

上述指令类看起来像这样。（照原样从 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>

【讨论】：

【解决方案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>

应该可以。

【讨论】：