Как сделать переупорядочение / перемешивание анимации с Angular ngFor в моем примере?

Question

Я работаю над переупорядочением / перемешиванием анимации с Angular, как в приведенном ниже посте, но это не работает для меня. Я думаю, что проблема заключается в том, что каждый раз, когда меняются переменные медсестры, компонент refre sh. Как реализовать анимацию переупорядочения / перемешивания элементов с помощью Angular's ngFor? .

Мой компонент HTML:

  <mat-card-content #nursesDL="cdkDropList" (cdkDropListDropped)="returntoTheList()"
                        [cdkDropListConnectedTo]="[selectedNursesDL1, selectedNursesDL2]" [cdkDropListData]="nurses"
                        cdkDropList class="scrollbar scrollbar-primary" fxFlex fxLayout="column"
                        fxLayoutAlign="start stretch"
                        fxLayoutGap="10px"
                        >
        <div (cdkDragStarted)="dragNurseStart($event, nurse)"
             *ngFor="let nurse of nurses | sortNurses: 'desc':sortByCircAide;let i = index"
             [cdkDragDisabled]="!hadWritePermission" cdkDrag fxFlex fxLayout="row" [transition-group]="'flip-list'">

          <app-profile-card [badge]=" i + 1 " [endTime]="nurse.calendar.endTime" [profile]="nurse.calendar.profile"
                            [startTime]="nurse.calendar.startTime" class="profile-card grab"
                            cssClass="nurse-card" transition-group-item></app-profile-card>

        </div>
      </mat-card-content>
    </mat-card>

Это директива, отвечающая за анимацию:

import { Directive, ElementRef, Component, ContentChildren, Input, QueryList } from '@angular/core';

@Directive({
  selector: '[transition-group-item]'
})

export class TransitionGroupItemDirective {
  // just comment
  prevPos: any;

  newPos: any;

  el: HTMLElement;

  moved: boolean;

  moveCallback: any;

  constructor(elRef: ElementRef) {
    this.el = elRef.nativeElement;
  }
}


@Component({
  selector: '[transition-group]',
  template: '<ng-content></ng-content>'
})
export class TransitionGroupComponent {
  @Input('transition-group') class;

  @ContentChildren(TransitionGroupItemDirective) items: QueryList<TransitionGroupItemDirective>;

  ngAfterContentInit() {
    console.log(this.items)
    this.refreshPosition('prevPos');
    this.items.changes.subscribe(items => {
      items.forEach(item => {
        item.prevPos = item.newPos || item.prevPos;
      });

      items.forEach(this.runCallback);
      this.refreshPosition('newPos');
      items.forEach(this.applyTranslation);

      // force reflow to put everything in position
      const offSet = document.body.offsetHeight;
      this.items.forEach(this.runTransition.bind(this));
    })
  }

  runCallback(item: TransitionGroupItemDirective) {
    if(item.moveCallback) {
      item.moveCallback();
    }
  }

   //just to comment

  runTransition(item: TransitionGroupItemDirective) {
    if (!item.moved) {
      return;
    }
    const cssClass = this.class + '-move';
    let el = item.el;
    let style: any = el.style;
    el.classList.add(cssClass);
    style.transform = style.WebkitTransform = style.transitionDuration = '';
    el.addEventListener('transitionend', item.moveCallback = (e: any) => {
      if (!e || /transform$/.test(e.propertyName)) {
        el.removeEventListener('transitionend', item.moveCallback);
        item.moveCallback = null;
        el.classList.remove(cssClass);
      }
    });
  }

  refreshPosition(prop: string) {
    this.items.forEach(item => {
      item[prop] = item.el.getBoundingClientRect();
    });
  }

  applyTranslation(item: TransitionGroupItemDirective) {
    item.moved = false;
    const dx = item.prevPos.left - item.newPos.left;
    const dy = item.prevPos.top - item.newPos.top;
    if (dx || dy) {
      item.moved = true;
      let style: any = item.el.style;
      style.transform = style.WebkitTransform = 'translate(' + dx + 'px,' + dy + 'px)';
      style.transitionDuration = '0s';
    }
  }
}