Перетаскивание списка - не работает с моей структурой данных (включая stackblitz)

Question

Я решил сделать меньшую реализацию из моего большого проекта. На данный момент я пытаюсь переделать список для перетаскивания функциональности. В моем проекте я вижу имена в списке, но не могу ничего перетаскивать. В стеке я ничего не могу показать в своем списке. Я , используя это сделать, чтобы сделать перетаскивание. Там - мой стековый блик с меньшей реализацией.

Правка 1

Будет хорошо, когда перетаскивание будет совмещено со списком материалов.

Правка 2

Когда я удаляю наблюдаемое из элемента файла, ошибка исчезает, но, к сожалению, все еще не работает. Наблюдаемое там требуется.

Answer 1

Файл TS

import { Component } from "@angular/core";
import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
import { Observable } from "rxjs";
;
import { transferArrayItem} from '@angular/cdk/drag-drop';

import * as i0 from "@angular/core";
/**
 * @title Drag&Drop sorting
 */
@Component({
  selector: "cdk-drag-drop-sorting-example",
  templateUrl: "cdk-drag-drop-sorting-example.html",
  styleUrls: ["cdk-drag-drop-sorting-example.css"]
})
export class CdkDragDropSortingExample {
  todo = [
    {
      name: "Pictures",
      extension: ""
    },
    {
      name: "Movies",
      extension: ""
    }
  ];
  done = [
    {
      name: "Pictures2",
      extension: ""
    },
    {
      name: "Movies2",
      extension: ""
    }
  ];


  ngOnInit() {}
   drop(event: CdkDragDrop<string[]>) {
    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);
    }
  }
}

HTML ФАЙЛ

<div class="example-container">
  <h2>To do</h2>

  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item.name}}</div>
  </div>
</div>

<div class="example-container">
  <h2>Done</h2>

  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[todoList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item.name}}</div>
  </div>
</div>

отметьте Stackbliz для ответа