Angular Перетаскивание с использованием Observable в качестве источника данных

Question

Я хочу использовать Observable в качестве источника данных для перетаскивания материала, но сейчас я борюсь. В основном у меня есть список дорожек на доске kanban, и у каждой дорожки есть куча предметов, которые я хочу перемещать. Когда я перемещаю элемент, я хочу также обновить и внутреннюю часть. Несколько человек также будут обновлять одну и ту же доску kanban, поэтому я хочу использовать socket.io для автоматического перемещения элементов (с чем я тоже борюсь по той же причине)

Вот шаблон :

<button mat-raised-button color="primary" (click)="addItem()">Add Item</button>

<button mat-raised-button color="primary" (click)="moveItem()" style="margin-left:10px">Move Item</button>

<div cdkDropListGroup>
<div class="example-container" *ngFor="let lane of swimlanes">
  <h2>{{lane.name}}</h2>

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

</div>

Вот код компонента:

import {Component, OnInit} from '@angular/core';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
import { Subscription, of, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export interface Swimlane{
  name: string;
  array: Observable<Task[]>;
}

export interface Task{
  name: string;
  list: string;
}

/**
 * @title Drag&Drop connected sorting
 */
@Component({
  selector: 'cdk-drag-drop-connected-sorting-example',
  templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
  styleUrls: ['cdk-drag-drop-connected-sorting-example.css'],
})
export class CdkDragDropConnectedSortingExample implements OnInit {

//These will eventually come from an API.
  items:Task[] = [
    {name: "Get to work", list: "To Do"},
    {name: "Pick up groceries", list: "To Do"},
    {name: "Go home", list: "To Do"},
    {name: "Fall asleep", list: "To Do"},
    {name: "Get up", list: "Done"},
    {name: "Brush teeth", list: "Done"},
    {name: "Take a shower", list: "Done"},
    {name: "Check e-mail", list: "Done"},
    {name: "Walk dog", list: "Done"}
  ];


  swimlanes:Swimlane[] = [];

//Create Observables as the data sources
  itemsObservable:Observable<Task[]>;

  todo:Observable<Task[]>;
  done:Observable<Task[]>;

  ngOnInit(): void {

    this.itemsObservable = of(this.items);

    this.todo = this.itemsObservable.pipe(
       map((item:Task[]) => item.filter((item:Task) => item.list === "Done")
     ));

    this.done = this.itemsObservable.pipe(
       map((item:Task[]) => item.filter((item:Task) => item.list === "To Do")
     ));    

    this.swimlanes.push({name:"To Do", array: this.todo});
    this.swimlanes.push({name:"Done", array: this.done});
  }

addItem(){
  this.items.push({name: "New Item", list: "To Do"});
  console.log(this.items.length);
}

moveItem(){

}

  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);
    }
  }
}

Вот блик стека , где я пытаюсь использовать наблюдаемые в качестве источника данных. Вы можете видеть, что он правильно загружает дорожки, но когда вы пытаетесь переместить один из предметов, он исчезает. Любые идеи?

В моем реальном приложении я получаю значения из запроса API. Таким образом, он автоматически входит в качестве наблюдаемого. Который я тогда разбиваю на локальный базовый массив и отписываюсь от Observable. Затем я создаю новый Observable из локального базового массива и вносю изменения в локальный базовый массив в надежде, что эти изменения отразятся в перетаскивании. Но в настоящее время это не работает.

Рад написать свою собственную функцию перемещения, но без дорожек, отражающих изменения в источнике данных Observable, я не могу заставить его работать.