Angular 角度鼠标左键未使用*ngFor调用

（mouseleave）指令不起作用，如果它是用*ngFor生成的：

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


  `,
})
export class App {
  hover:boolean;

  hoverdivs = [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false]

  constructor() {
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
可悬停div{{i}

悬停状态：{{item}

`,
})
导出类应用程序{
悬停：布尔；
hoverdivs=[假，假，假，假，假，假，假，假，假，假，假，假，假，假，假，假，假，假，假，假]
构造函数（）{
}
}

：如果您移动鼠标足够快，您可以看到一些div“卡在”悬停状态

---

有没有办法强迫别人打电话

这不是

mouseenter

或

mouseleave

的问题。这是因为从角度渲染，看到这个

所以逻辑是，当

mouseenter

到

div

（慢时）时，它实际上调用了两次。您可以通过函数对其进行调试

<div style="background-color: grey; height: 80px; margin-bottom: 15px;"
    (mouseenter)="fire($event, i)"
    (mouseleave)="fire($event, i)">
      Hoverable div #{{i}}
      hover status: {{hoverdivss[i]}}
    </div>

fire(e,key) {
    e.stopPropagation();
    console.log(key)
  }

可悬停div{{i}
悬停状态：{hoverdivss[i]}
火（e，钥匙）{
e、 停止传播（）；
console.log（键）
}

甚至你把

e.stopPropagation（）它将不起作用，因为angular将更改
悬停divs
并重新渲染模板，最终再次触发
鼠标指针。它会打两次电话

以下步骤：

滑鼠
角度更改值为真
最后一个鼠标的触发位置
因为同一个div再次触发mouseenter
在您的情况下，快速移动鼠标时出现问题，无法将值
true
更改为
false
原因是在angular完成渲染后，angular不会再次调用
mouseenter

要解决此问题，应避免重新渲染模板

播放。
在*ngFor中使用
hoverdivs
数组，这意味着angular每次检测到数组中的更改时都会渲染所有div

当
mouseenter
或
mouseleave
时，更改数组，从而触发div的渲染。你鼠标滑过的div现在是一个新的div

您可以通过使用角度检测不到变化的东西来避免这种情况，比如对象数组而不是布尔数组

更改
hoverdivs=[false，false，false，false，false]
到
hoverdivs=[{status:false}，{status:false}，{status:false}，{status:false}，{status:false}，]

如果替换整个对象，Angular将仅检测阵列中的更改。如果只更改数组中对象的属性，它将不会检测到数组中的更改

工作演示：
sidenote：我知道它可以用css:hover解决，但我需要对hover事件进行更复杂的计算。