Angular 每次使用角度4更改阵列时触发动画

需要在每次阵列更改时触发动画

我目前正在使用*ngfor对一系列产品进行迭代，每次长度改变动画都会触发。我用的是角度4

<ul class="items col col-md-12" *ngIf="hasProducts()" [@productsIntro]="products.length">

---

发现当产品阵列长度从0开始然后更改时，动画未被触发。 我的解决方案是删除HTML组件中的条件，并添加切换函数，以便在每次更改数组时更改变量状态：

切换功能：

animationState = 'inactive';
toggleState() {
this.animationState = this.animationState === 'active' ? 'inactive' : 'active';

}

更改自：

<ul class="items col col-md-12" *ngIf="hasProducts()" [@productsIntro]="animationState">
    <li class="col col-xs-12 col-sm-12 col-md-4" *ngFor="let product of products">

改为：

<ul class="items col col-md-12"  [@productsIntro]="animationState">
    <li class="col col-xs-12 col-sm-12 col-md-4" *ngFor="let product of products">

“阵列中的项目不同”：项目有哪些变化？是什么让它们发生变化？根据用户单击的类别按钮添加和删除产品。因此，每次用户单击一个新的类别按钮时，产品数组都会发生变化。我认为如果使用状态，则当product.length发生变化时，以及当您单击任意位置对项目进行更改时，都会触发动画。我读入了状态，但仍然对如何在代码中实现感到有点困惑。查看Angular文档中的动画，我看到它们使用[@heroState]=“hero.state”，但我不确定hero.state指的是哪里。我仍然是Angular的新手，所以如果我错过了显而易见的内容，请原谅。目前，每次阵列更改时，我都会切换动画，但在我第一次显示列表上的产品时，它不起作用。最后在HTML组件上执行[@productsIntro]=“animationState”。每次我更改数组时都使用切换函数来更改animationState的值。在我第一次加载阵列时它应该可以工作，但它不能工作，这让人困惑。谢谢你的解决方案，你能举一个StackBlitz示例，让我们知道你的解决方案是如何工作的吗，但之前渲染的元素在新渲染的数组之后仍然会在屏幕上显示动画，并且调用done方法所花费的时间比实际要长，请帮助

<ul class="items col col-md-12" *ngIf="hasProducts()" [@productsIntro]="animationState">
    <li class="col col-xs-12 col-sm-12 col-md-4" *ngFor="let product of products">

<ul class="items col col-md-12"  [@productsIntro]="animationState">
    <li class="col col-xs-12 col-sm-12 col-md-4" *ngFor="let product of products">