Angular 角度下降事件不一致

最小复制：

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

但是，问题出在

（drop）=“BuggyonDrop（$event）”

中

$event

在拖动元素上给出了

DragEvent

换句话说，如果我拖动

并将其放到

上，

drop（）

上的事件信息是

奇怪的是，当我执行

console.log（event.target.id）

时，结果是

unique2

此外，如果我将调试器放在

控制台.log的正下方，结果很好（按预期工作）

所以这真的很奇怪而且前后矛盾

我不得不花费数小时寻找原因和解决办法。事实证明，不使用
*ngFor
是一种解决方案（必须逐个手动放置数据绑定值）

我已经测试了chrome和opera


如您所见，
event.target
正在提供
unique3
元素，但当我执行
event.target.id
时，它正在提供
unique0

不太清楚它为什么会这样运行默认情况下，
ngFor
循环按值跟踪项目。在代码中，交换拖放操作中涉及的两个项的值。循环可能交换循环中的项索引，以使相同的值保持在相同的位置

为确保
ngFor
循环索引引用了正确的目标元素，您应按索引列出项目：

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

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

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

请参阅stackblitz的演示。您会注意到，我重命名了一些属性，以反映拖放不再有bug的事实…
默认情况下，
ngFor
循环按值跟踪项目。在代码中，交换拖放操作中涉及的两个项的值。循环可能交换循环中的项索引，以使相同的值保持在相同的位置

为确保
ngFor
循环索引引用了正确的目标元素，您应按索引列出项目：

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

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

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

请参阅stackblitz的演示。您会注意到，我重命名了一些属性，以反映拖放不再是bug的事实…
您的示例对我来说很好，我已经删除了一些console.log。。。尝试将“buggy0”拖动到“buggy4”并检查控制台，然后对“not_buggy0”执行相同的操作并将其拖动到“not_buggy4”。。。它给出了相同的结果：我觉得你的例子不错，我已经去掉了一些console.log。。。尝试将“buggy0”拖动到“buggy4”并检查控制台，然后对“not_buggy0”执行相同的操作并将其拖动到“not_buggy4”。。。它给出了相同的结果：感谢您的回复，虽然这项工作做得很好，但我仍然想知道它为什么会以这种方式运行我的意思是，我的代码在被交换时仍然会更改节点的上下文。我为答案添加了一个解释。感谢您的回复，虽然这项工作做得很好，但我仍然想知道它为什么会以这种方式运行我的意思是，我的代码在被交换时仍然会更改节点的上下文。我在答案中添加了一个解释。