Angular中*ngFor生成元素时mouseleave指令无法触发问题

我来帮你排查这个问题——你遇到的情况其实是Angular变更检测机制导致的常见坑，看起来(mouseleave)事件没触发，但实际上事件大概率已经执行了，只是状态变化没同步到视图上。咱们一步步来分析和修复：

问题根源 #

Angular的变更检测默认通过引用变化来感知数据更新。当你直接修改数组元素（比如hoverdivs[i] = true/false）时，数组本身的引用没有改变，Angular无法自动检测到内部元素的变化，导致视图不会更新。另外，*ngFor在没有设置trackBy的情况下，可能会在数组元素变化时重建DOM节点，进一步干扰事件的正常绑定和状态同步。

修复方案（推荐使用方案1） #

方案1：用对象数组存储hover状态

把每个hover状态封装成对象（引用类型），修改对象属性时Angular能自动感知到变化，无需额外操作：

@Component({
  selector: 'my-app',
  template: `
    <ng-container *ngFor="let item of hoverdivs; index as i">
      <!-- 给div加些内边距和外边距，方便测试hover效果 -->
      <div style="background-color: grey; padding: 10px; margin: 8px 0;" 
           (mouseenter)="item.active = true" 
           (mouseleave)="item.active = false">
        <p>Hoverable div #{{i}}</p>
        <p> hover status: {{item.active}} </p>
      </div>
    </ng-container>
  `,
})
export class App {
  // 用对象数组存储每个div的hover状态
  hoverdivs = [
    {active: false},
    {active: false},
    {active: false},
    {active: false},
    {active: false}
  ];
}

方案2：手动触发变更检测（适合坚持用布尔数组的场景）

如果你想继续使用布尔数组，可以通过手动触发变更检测，或者重新赋值数组来让Angular感知到变化：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <ng-container *ngFor="let item of hoverdivs; index as i; trackBy: trackByIndex">
      <div style="background-color: grey; padding: 10px; margin: 8px 0;" 
           (mouseenter)="updateHoverStatus(i, true)" 
           (mouseleave)="updateHoverStatus(i, false)">
        <p>Hoverable div #{{i}}</p>
        <p> hover status: {{item}} </p>
      </div>
    </ng-container>
  `,
})
export class App {
  hoverdivs = [false, false, false, false, false];

  constructor(private cdr: ChangeDetectorRef) {}

  updateHoverStatus(index: number, status: boolean) {
    this.hoverdivs[index] = status;
    this.cdr.detectChanges(); // 手动触发变更检测，同步视图
  }

  // 添加trackBy函数，避免*ngFor不必要地重建DOM
  trackByIndex(index: number) {
    return index;
  }
}

或者你也可以通过重新赋值数组的方式触发变更检测（无需依赖ChangeDetectorRef）：

updateHoverStatus(index: number, status: boolean) {
  // 用map创建新数组，改变引用触发变更检测
  this.hoverdivs = this.hoverdivs.map((item, i) => i === index ? status : item);
}

内容的提问来源于stack exchange，提问作者ForestG