时间戳

首页 > 解决方案 > 角度下降事件不一致

angular - 角度下降事件不一致

问题描述

最小复制：https ://stackblitz.com/edit/buggydrop

当用户将一个元素拖放到另一个元素上时，我正在制作一个简单的网站，以便每个元素的内容相互交换。

但是，问题在于给出了(drop)="BuggyonDrop($event)"拖动元素。$eventDragEvent

换句话说，如果我将<p id="unique0">它拖放<p id="unique2">到事件信息drop()上<p id="unique0">...

奇怪的是，当我这样做时console.log(event.target.id)，结果是unique2.

此外，如果我将调试器放在下面，console.log结果很好（按预期工作）。

所以这真的很奇怪和不一致。

我不得不花费数小时寻找原因和解决方法。原来不使用*ngFor是一个解决方案（必须手动一个一个地放置数据绑定值）。

我已经在chrome和opera上测试过...

这是我执行以下代码时的console.log结果

console.log("BuggyonDrop")
console.log(event)
console.log(event.target)
console.log(event.target.id)

正如你所看到的，event.target正在给予unique3元素，但当我这样做时，event.target.id它正在给予我unique0

不太确定为什么会这样

标签： angularangular9

解决方案

默认情况下，ngFor循环按值跟踪项目。在您的代码中，您交换拖放操作中涉及的两个项目的值。循环可能会交换循环中的项目索引以将相同的值保持在相同的位置。

为确保ngFor循环索引引用正确的目标元素，您应该按索引跟踪项目：

*ngFor="let id of good.idArray; index as i; trackBy: trackByIndex"

其中trackByIndex是组件类的一个方法：

public trackByIndex(index, item) {
  return index;
}

有关演示，请参阅您的 stackblitz 的此修改版本。您会注意到我重命名了一些属性以反映拖放不再是错误的事实......

推荐阅读