Angular 6列表交错动画两次显示列表项

Question

我有一个基于可观察的列表，该列表指向Firebase实时数据库条目，并且我想为从列表中添加或删除元素时添加动画。

我的问题是，动画在初始页面加载时正确显示（如果列表中已经填充了某些项目-显示在下面的动画结尾处），但是当元素为时，动画具有不寻常的副作用添加（或更确切地说，它发生在第一个元素之后的每个元素）：

如您所见-最后-刷新页面时，所有项目均正确制作了动画，但是当我一个接一个地添加它们时，内部元素显示两次，一个为动画，一个为静态，以及当动画完成后，第二个元素消失了。

我之前在list元素上也遇到过问题（但是内部元素只显示了一次）。我通过添加trackBy函数解决了这一问题。然后，列表元素不再显示两次，而是显示内部元素（如您在图片中看到的那样）。

这是我到目前为止得到的：

overview.html

<ng-container *ngIf='userOrders | async as userOrdersFromContainer'>
  <div [@listStagger]="userOrdersFromContainer.length">
    <div *ngFor="let userOrder of userOrdersFromContainer; trackBy:identify">
      <user-order [userOrder]="userOrder"></user-order>
    </div>
  </div>
</ng-container>

overview.ts：

@Component({
 selector: 'user-order-overview',
 templateUrl: './user-order-overview.component.html',
 styleUrls: ['./user-order-overview.component.css'],
 animations: [
  trigger('listStagger', [
    transition('* <=> *', [
      query(
        ':enter',
        [
          style({ opacity: 0 }),
          stagger(
            '50ms',
            animate(
              '550ms ease-out',
              style({ opacity: 1 })
            )
          )
        ],
        { optional: true }
      ),
      query(':leave', animate('50ms', style({ opacity: 0 })), {
        optional: true
      })
    ])
  ])
]
})
export class UserOrderOverviewComponent implements OnInit, OnDestroy {
    userOrders: Observable<UserOrder[]>;
    ngOnInit() {
       this.userOrders = this.orderService.loadUserOrders(this.groupOrderId);
    }

    ...

    identify(index, item) {
       return item.userId;
    }
}

ListElement.html：     

  <h6>{{userOrder?.displayName}}</h6>

  <div *ngFor="let userOrderItem of userOrderItems()">
  {{userOrderItem?.name}} {{userOrderItem?.price | currency:'EUR'}}
  </div>
</div>

ListElement.ts： 我认为其中不包含任何重要内容。