angular 在仍然存在于DOM中的动画子元素上触发状态转换到void,

r1wp621o  于 4个月前  发布在  Angular
关注(0)|答案(1)|浏览(75)

🐞 bug报告

受影响的软件包

问题是由软件包 @angular/animation (任何版本)引起的

描述

  1. 有一个数字数组
  2. 有一个父容器,使用该数组生成多个子项的ngFor循环。
  3. 每个项目从分配的数组中获取其数字。
  4. 每个项目都有一个动画附加,用于可视化活动或非活动状态。父容器有一个动画附加,用于协调子项的错位。
  5. 通过修改数字数组来删除项目时,该项目将被删除。
  6. 通常这可以正常工作,项目会消失(不涉及动画)
    当数组包含相同的数字并删除其中一个重复的数字时,您会遇到一个问题。正如预期的那样,这将导致剩余的兄弟姐妹向左移动,但您将获得一个“死”组件列表——但仅从动画的Angular 来看,因为子动画已经过渡到void状态,而在DOM中仍然安全无恙。我可以在一个小的stackblitz中更详细地说明这一点,通过参考演示的部分。

🔬 最小复现

预览:
https://animation-dom-move-bug.stackblitz.io/
源代码:
https://stackblitz.com/edit/animation-dom-move-bug

🔥 异常或错误

我的小 stackblitz demo 显示了错误,您可以完美地重现它:

这样做: 点击“删除2”,您将在gif循环的开头看到发生了什么。

黄色表示void状态。您可以看到gif循环开始时的黄色到绿色动画,这是转换(void => active)。点击删除按钮后,您将看到黄色项目。我称之为“死亡”。仍在DOM中,但处于void状态。只需查看单击删除按钮后的全部黄色数字。同时查看控制台,您将看到大量的从active到void的状态转换,这是错误的。

🌍 您的环境

Angular版本:

最新Angular 7,请参阅stackblitz演示。

其他相关问题?

这里有一些相关的issues我认为

3ks5zfa0

3ks5zfa01#

我认为在不使用trackBy函数的情况下,Angular不支持在*ngFor指令中出现重复的项目。如果没有它,就无法将项目与其元素配对。我有一个added trackBy to your example,它可以解决这个问题。

相关问题