Angular 9动画无法处理动态数据

我正在尝试编写一个组件，它看起来像是在电视上播放的，体育比赛结果将一行一行地显示出来，并构建一个结果表。但现在我有一些角度动画“副作用”

我的架构看起来像：

Scoreboard
    -- View results component
    -- View time keeping component
    -- View xyz component

记分板是通过Websocket服务接收数据的主要组件。根据接收到的数据动态创建视图组件（

createComponent（…）

），并显示接收到的数据。这一切都很好。现在我正在尝试添加一些不错的动画效果，但这并不像预期的那样有效。 当从Websocket服务接收数据时，所有数据将立即显示（无任何动画）

我试图将其简化为如下示例：

import { Component, OnInit } from "@angular/core";
import { trigger, transition, style, animate, query, stagger } from "@angular/animations";

@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    animations: [
        trigger("listAnimation", [
        transition("* => *", [
            // each time the binding value changes
            query(
            ":leave",
            [stagger(100, [animate("0.5s", style({ opacity: 0 }))])],
            { optional: true }
            ),
            query(
            ":enter",
            [
                style({ opacity: 0 }),
                stagger(100, [animate("0.5s", style({ opacity: 1 }))])
            ],
            { optional: true }
            )
        ])
        ])
    ],
})
export class AppComponent {
    items = ["a", "b", "c"];

    ngOnInit() {}

    i = 0;

    ngAfterViewInit() {
        setInterval(() => {
        this.items = this.i++ % 2 == 0 ? ["1", "2", "3"] : ["x", "y", "z"];
        }, 3000);
    }
}

组件已创建并显示初始动画，但在

setInterval（）

中更改阵列时，视图将更改，而不显示任何动画。 为什么它的行为如此？或者更好：我的错误在哪里？如何解决

有关工作示例，请参见。

有多个问题

第一个问题是您正在尝试设置

标记的动画，我不建议这样做，因为生成的dom与模板不同

所以我切换到基本的

标签来解决这个问题

第二个原因是数组从不为空，这就是为什么没有离开动画

因此，我使用

setTimeout

函数将其值设置为一个空数组

setInterval（（）=>{
此参数为.items=[]；
设置超时（（）=>{
this.items=this.i++%2==0？[“1”、“2”、“3”]：[“x”、“y”、“z”]；
}, 0);
}, 3000);

第三个问题是动画没有同步，因此我必须为参差动画添加一个延迟以同步它

我还对动画进行了各种调整，使其看起来很好

动画：[
触发器（“listAnimation”[
转换（“*=>*”[
//每次绑定值更改时
团体([
质疑(
“：离开”，
[交错（100，[动画（“0.5s”，样式（{opacity:0}））]）]，
{可选：true}
),
质疑(
“：输入”，
[
样式（{不透明度：0，高度：0，可见性：'隐藏'}），
交错（100[
动画（“0s1.5s”，样式（{}）），
样式（{高度：“*”，可见性：'可见'}），
动画（“.5s”，样式（{opacity:1}））
])
],
{可选：true}
)
])
])
])
],

---

注意：控制台中仍然有一些错误，我还没有弄清楚。

thx很多。它就像一个符咒。但请你也看看，也许你也有一些想法？