Почему не работает DragDrop?

Question

[Егор Антропов]

У меня есть компонент, в который входят 2 массива:

2 массива

fieldsActive = [
    {
      field: 'id',
      desc: 'id'
    },
    {
      field: 'manager',
      desc: 'Менеджер'
    }
  ];
  fieldsAvailable = [
    {
      field: 'type',
      desc: 'Тип'
    },
    {
      field: 'task',
      desc: 'Задача'
    },
    {
      field: 'status',
      desc: 'Статус'
    },
    {
      field: 'name',
      desc: 'Название'
    },
    {
      field: 'desc',
      desc: 'Описание'
    },
    {
      field: 'data',
      desc: 'Дата'
    },
    {
      field: 'date-of-close',
      desc: 'Дата закрытия'
    },
    {
      field: 'Utm',
      desc: 'utm content'
    }
  ];

В самом компоненте должна быть возможность перемещать элементы из одного массива в другой с чекбоксами и драгндропом. Чекбоксы работают, а драгндроп нет.

класс component.ts компонента, в который входят 2 массива

export class TableFieldsComponent implements OnInit {

  emptyActive: boolean;
  emptyTotal: boolean;
  f1;
  f2;
  @Input() fields;
  @Output() fieldsChange = new EventEmitter();

  addField(data) {
    this.f1.push(this.f2.find((i) => i.field === data));
    this.f2.splice(this.f2.findIndex((i) => i.field === data),1);
    this.fieldsChange.emit(this.f1);
    if (this.f2.length === 0) {
      this.emptyTotal = true;
    }
    this.emptyActive = false;
  }

  deleteField(data) {
    this.f2.push(this.f1.find((i) => i.field === data));
    this.f1.splice(this.f1.findIndex((i) => i.field === data),1);
    this.fieldsChange.emit(this.f1);
    if (this.f1.length === 0) {
      this.emptyActive = true;
    }
    this.emptyTotal = false;
  }

  drop(event: CdkDragDrop<object[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }

  constructor() {
  }

  ngOnInit() {
    this.f1 = this.fields.fieldsActive;
    this.f2 = this.fields.fieldsAvailable
  }

}

html того же компонента

<section class="filter-fields">
  <h3 *ngIf="!emptyActive">Таблица</h3>
  <div class="example-container"
       cdkDropList
       #activeFields="cdkDropList"
       [cdkDropListData]="active"
       [cdkDropListConnectedTo]="[availableFields]"
       (cdkDropListDropped)="drop($event)">
    <div class="example-list" *ngFor="let field of fields.fieldsActive" cdkDrag>{{field.desc}} <input type="checkbox" (click)="deleteField(field.field)" class="checkbox" checked></div>
  </div>
  <h3 *ngIf="!emptyTotal">Добавить в таблицу</h3>
  <div class="example-container"
       cdkDropList
       #availableFields="cdkDropList"
       [cdkDropListData]="available"
       [cdkDropListConnectedTo]="[activeFields]"
       (cdkDropListDropped)="drop($event)">
    <div class="example-list" *ngFor="let field of fields.fieldsAvailable" cdkDrag>{{field.desc}} <input type="checkbox" (click)="addField(field.field)" class="checkbox"></div>
  </div>
</section>

Я всё делал как здесь

Answer 1

[Олег]

Свой вариант лучше сделать на https://stackblitz.com/ и дать на него ссылку, а не выкладывать исходники текстом в вопрос. Так можно будет сразу же и поправить ошибку — на stackblitz