Angular 使用 RxJS 的热观察：数组的更改不会发送给订阅者

Question

我有一个像 trello 这样的小任务板，上面有待完成、正在做和已完成的任务。所有任务都存储在一项名为 TaskService 的服务中的 3 个独立数组中。为了显示任务和更改任务状态，我实现了 angular 的 cdk drag n drop.

我现在的目标是订阅任务数组，以便在数组更改时将更改发送到 api。现在我只是想 console.log 事件，但我不明白发生了什么它似乎工作但我无法获得数组更新。

这是我的组件控制器：

doing: any[];

  constructor(private taskService: TaskService) {}

  ngOnInit(): void {
    this.getTodoTasks();
    // this.getDoingTasks();
    this.getDoneTasks();

    const obs$ = this.taskService.getDoing();

    obs$.subscribe({
      next: (data: any[]) => {
        this.doing = data;
        console.log(data);
      },
    });
  }

  todo: any[];
  // doing: Subscriber<any[]>;
  done: any[];
  newTaskText: string = '';

  isModalShown: boolean = false;

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

  newTask() {
    console.log(`Click Modal!`);
    this.isModalShown
      ? (this.isModalShown = false)
      : (this.isModalShown = true);
  }

  getTodoTasks() {
    this.taskService.getTodos().subscribe((data) => {
      this.todo = data;
      console.log(`Se ha añadido Tak a : Todo`);
    });
  }

这是我的观点：

<app-modal *ngIf="isModalShown" (close)="newTask()">
  <div class="modalContent">
    <textarea
      name=""
      id=""
      cols="30"
      rows="10"
      class="newTask"
      [(ngModel)]="newTaskText"
    ></textarea>
    <div class="modalButtons">
      <input
        type="button"
        value="Cancel"
        class="btn btn-secondary"
        (click)="cancelTask()"
      />
      <input type="button" value="Save" class="btn btn-primary" (click)="saveTask()" />
    </div>
  </div>
</app-modal>

<div class="container">
  <div class="list">
    <h2>TO DO</h2>
    <input type="button" value="Modal" (click)="newTask()" />
    <div
      class="tasks"
      cdkDropList
      #todoList="cdkDropList"
      [cdkDropListData]="todo"
      [cdkDropListConnectedTo]="[doingList, doneList]"
      (cdkDropListDropped)="drop($event)"
    >
      <div class="task" *ngFor="let item of todo" cdkDrag>{{ item }}</div>
    </div>
  </div>
  <div
    class="list"
    cdkDropList
    #doingList="cdkDropList"
    [cdkDropListData]="doing"
    [cdkDropListConnectedTo]="[doneList, todoList]"
    (cdkDropListDropped)="drop($event)"
  >
    <h2>DOING</h2>
    <div class="tasks">
      <div class="task" *ngFor="let item of doing" cdkDrag>{{ item }}</div>
    </div>
  </div>
  <div
    class="list"
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[doingList, todoList]"
    (cdkDropListDropped)="drop($event)"
  >
    <h2>DONE</h2>
    <div class="tasks">
      <div class="task" *ngFor="let item of done" cdkDrag>{{ item }}</div>
    </div>
  </div>
</div>

还有我的服务：

constructor() {}

  todo = ['task 1', 'task 2', 'task 3'];
  doing = [];
  done = [];

  getTodos(): Observable<any[]> {
    return of(this.todo);
  }

  getDoing(): Observable<any[]> {
    return new Observable((subscriber) => {
      subscriber.next();
    })
  }

  getDone(): Observable<any[]> {
    return of(this.done);
  }

我已经做了一些尝试，但当通过拖放将新元素添加到任何数组时，我无法在我的终端上获得 console.log。

Answer 1

我找不到任何解决方案，所以我向拖放区域添加了一个 id 参数，这样我就可以识别拖放区域的目的地，然后实现我的逻辑。

如果有人发现我的代码中缺少什么，我会用正确的解决方案更新问题。

Angular 使用 RxJS 的热观察：数组的更改不会发送给订阅者

Angular hot observables with RxJS: Changes on array are not emitted to subscribers

javascript

angular

rxjs

observable