Question

问题：：我有一些使用* ngFor来生成一堆div且都具有相同类的html。我希望能够向单个元素添加一个活动类。我一直遇到这个问题，尽管将该类应用于所有元素而不是一个元素。

HTML：

declare @dynamicpivotquery as NVARCHAR(MAX)
declare @columnname as NVARCHAR(MAX)

select @columnname = COALESCE(@columnname + ', ','') + quotename(col_1) + quotename(col_1)
from (select distinct col_1, col_2 from *tablename*) as d

set @dynamicpivotquery = 
N'select distinct date, ' + @columnname + ' from *tablename*
PIVOT (sum(price) for d in (' + @columnname + ')) as pivot12'

EXEC sp_executesql @dynamicpivotquery

目标：最终，我希望能够做些简单的事情，例如将<div class="feed" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" > <div class="mentions" *ngFor = 'let item of feed; let i = index;'> <div class="content-wrapper"> <img src={{item.image}}> <div class="content-text"> <div>{{item.name}}</div><br> <div>{{item.text}}</div><br> <div>{{item.followers}}</div><br> </div> </div> <div class="votebtn"> <button mat-button matSuffix mat-icon-button aria-label="UpVote" id = u-{{item.source}} class="UpVote" (click)="vote(i, item, 'keep')"> <mat-icon>thumb_up</mat-icon> </button> <button mat-button matSuffix mat-icon-button aria-label="DownVote" id=d-{{item.source}} class=DownVote (click)="vote(i, item, 'ignore')"> <mat-icon>thumb_down</mat-icon> </button> </div> </div> </div>添加到鼠标悬停在单个box-shadow: 1px -1px 12px 0px #c9c9c9元素上，然后将其删除鼠标移出。这是我最近的尝试。

mentions

同样，它将添加到所有元素。

Answer 1

您可以通过定义一个小的属性指令来存档此视觉效果：

    @Directive({
      selector: '[ngHoverClass]'
    })
    export class NgHoverClassDirective {
       @Input(`ngHoverClass`)
       set classesToAply(v: string | string[]){
          this.classes = Array.isArray(v) ? v: v.split(' ');
       }
       private classes: string[] = [];

       constructor(private renderer: Renderer2, private element: ElementRef){}

       @HostListener('mouseover')
       onHover(){
         this.classes.forEach(c=> this.renderer.addClass(this.element.nativeElement, c));
       }

       @HostListener('mouseleave')
       onLeave(){
         this.classes.forEach(c=> this.renderer.removeClass(this.element.nativeElement, c));
       }
    }

供消费后，可以在组件中使用它，如下所示：

<div *ngFor = 'let item of feed; let i = index;' ngHoverClass='hover' class="mentions">

Answer 2

最新回复。我让对象数组完成大部分工作，因为这种模式对我来说更干净：

CSS

 li.selected {
   border-bottom: thick solid purple;
 }
 li.hover {
   border-bottom: thick dotted gray;
 }

对象

 NavigtionMenu = [
   {
     name: 'Home',
     link: 'path/to/link',
     hover: false,
     selected: false,
   },
   {
     name: 'About Us',
     link: 'path/to/link',
     hover: false,
     selected: false,
   }
 ]

模板

  <li 
     *ngFor="let item of items; let i = index"
     (mouseover)="item.hover = true"
     (mouseout)="item.hover = false"
     (click)="item.selected = true"
     [routerLink]="item.link"
     [ngClass]="{
       'selected' : link.selected === true && link.hover === false,
       'hover'    : link.hover === true
     }"
  >
   {{ item.name }}
  </li>

Answer 3

 <div *ngFor="let item of feed; let i = index;" [ngClass]="{'hovered': item.isHovered'}" (mouseover)="item.isHovered=true" (mouseout)="item.isHovered=false">

如何将鼠标悬停在ngFor生成的元素上添加类？

3 个答案: