ngFor 正在触发 mouseenter 子更改

Question

每次子元素发生变化时，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 文本上，将出现“叠加层”。由于item是通过interval生成的，所以出现的时间会晚一些，不过这样也可以。一旦他们在那里，将鼠标悬停在第一个项目上。 mouseenter 计数将在每次项目更改时增加，但侦听器本身位于父项 div 上，而不是项目上。我试过使用 stopPropagation，但它无济于事。事件仍然被触发。知道我该如何解决这个问题吗？

Answer 1

尝试将 trackBy 函数添加到 ngFor

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

ngFor 正在触发 mouseenter 子更改

ngFor is triggering mouseenter on child change

angular

mouseevent