Why is DragDrop not working?

Question

Angular

I have a component that contains 2 arrays:

2 arrays

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'
    }
  ];

In the component itself, it should be possible to move elements from one array to another with checkboxes and a drag drop. Checkboxes work but dragdrops don't.

the component.ts class of the component, which includes 2 arrays

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 of the same component

<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>

I did everything here

Answer 1

It ’s better to make your own version on https://stackblitz.com/ and give a link to it, rather than posting the source code in the text in the question. So it will be possible to immediately correct the error - on stackblitz