ngFor 在子更改时触发 mouseenter答案

【问题标题】：ngFor is triggering mouseenter on child changengFor 在子更改时触发 mouseenter
【发布时间】：2021-05-17 15:32:23
【问题描述】：

NgFor 每次子元素改变时都会在父元素上触发 mouseenter。我想禁用此行为，但我不知道如何。我在 stackblitz here 中创建了一个简单的示例。

组件：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  visible;
  mouseenterCalled = 0;
  intervalCalled = 0;

  items$ = interval(2000).pipe(
    map(() => {
      this.intervalCalled++;
      return [`item${this.intervalCalled}`, 'item2', 'item3'];
    })
  );

  onEnter() {
    this.mouseenterCalled++;
    this.visible = true;
  }
}

和模板：

<div (mouseenter)="onEnter()">Hover me | mouseenter was called: {{mouseenterCalled}}x | | interval was called:
  {{intervalCalled}}x</div>
<div *ngIf="visible" (mouseenter)="onEnter()">
  <div>Overlay header</div>
  <div *ngIf="items$ | async as items">
    <p *ngFor="let item of items">{{ item }}</p>
  </div>
</div>

如果您将鼠标悬停在 Hover me 文本上，则会出现“叠加层”。由于项目是通过间隔生成的，因此它们会稍后出现，但这没关系。一旦他们在那里，将鼠标悬停在第一个项目上。 mouseenter 计数将在每次更改项目时增加，但侦听器本身位于父 div 上，而不是项目上。我已经尝试过 stopPropagation，但它无济于事。事件仍然被触发。知道我该如何解决这个问题吗？

【问题讨论】：

标签： angular mouseevent

【解决方案1】：

尝试在 ngFor 中添加 trackBy 函数

component.html

<div (mouseenter)="onEnter()">Hover me | mouseenter was called: {{mouseenterCalled}}x | | interval was called:
  {{intervalCalled}}x</div>
<div *ngIf="visible" (mouseenter)="onEnter()">
  <div>Overlay header</div>
  <div *ngIf="items$ | async as items">
    <p *ngFor="let item of items;trackBy: trackBy">{{ item }}</p>
  </div>
</div>

component.ts

 trackBy = (item,index)=>{
    return item;
 }

【讨论】：