Javascript 如何在Angular拖放组件中同步数组

我有一个与html类似的拖放组件:

 <div
    class="example-container flex flex-col text-center h-fit min-h-[10rem] w-[15%] border-2 border-gray-100 rounded-md shadow-md"
  >
    <h2
      class="text-xl font-semibold mx-auto py-4 bg-green-100 w-full drop-shadow-md"
    >
      Monday
    </h2>
    <div
      cdkDropList
      [cdkDropListData]="Monday"
      class="example-list bg-red-100 min-h-[5rem]"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of Monday; track item) {

      <app-drag-drop-item [title]="item" cdkDrag></app-drag-drop-item>
      }
    </div>
  </div>

第二个容器:

<div
    class="example-container flex flex-col text-center h-fit min-h-[10rem] w-[15%] border-2 border-gray-100 rounded-md shadow-md"
  >
    <h2
      class="text-xl font-semibold mx-auto py-4 bg-blue-100 w-full drop-shadow-md"
    >
      Tuesday
    </h2>
    <div
      cdkDropList
      [cdkDropListData]="Tuesday"
      class="example-list bg-red-100 min-h-[5rem]"
      (cdkDropListDropped)="drop($event)"
    >
      @for (item of Tuesday; track item) {

      <app-drag-drop-item [title]="item" cdkDrag></app-drag-drop-item>
      }
    </div>
  </div>

我有两天时间和每一天的时间，它们存储在一个数组中:

  Monday = ['Refractoring'];
  Tuesday = ['Gym'];

我可以使用Angular CDK拖放:

https://material.angular.io/cdk/drag-drop/overview

在屏幕上移动此任务. 问题是更改没有反映Actiallarray. 因此，如果a有两个数组:

  Monday = ['Refractoring'];
  Tuesday = ['Gym'];

然后我把Tks从星期一移到星期二，数组元素没有改变.虽然在屏幕上，我必须在Tuesady Conatainer中完成任务.

Component.ts文件

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  CdkDragDrop,
  CdkDrag,
  CdkDropList,
  CdkDropListGroup,
  moveItemInArray,
  transferArrayItem,
} from '@angular/cdk/drag-drop';
import { DragDropItemComponent } from '../drag-drop-item/drag-drop-item.component';
import { MatIconModule } from '@angular/material/icon';
import { FormsModule } from '@angular/forms';
import { AddTaskFormComponent } from '../add-task-form/add-task-form.component';
import { TaskService } from '../../../../shared/services/task.service';

@Component({
  selector: 'app-dashboard-space',
  standalone: true,
  imports: [
    CdkDropListGroup,
    CdkDropList,
    CdkDrag,
    DragDropItemComponent,
    DragDropItemComponent,
    MatIconModule,
    FormsModule,
    AddTaskFormComponent,
    CommonModule,
  ],
  templateUrl: './dashboard-space.component.html',
  styleUrl: './dashboard-space.component.css',
})
export class DashboardSpaceComponent {
  constructor(private e: TaskService) {
    this.tasks = this.e.getTasks();
  }

  tasks: any[];

  todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];

  Monday = ['Refractoring'];
  Tuesday = ['Gym'];
  Wednesday = ['Interview'];
  Thursday = ['TV'];
  Friday = ['Sport'];

  done = ['Get up', 'Brush teeth', 'Take a shower', 'Check e-mail', 'Walk dog'];

  newTask: string = '';

  addNewTask() {
    this.todo.push(this.newTask);
  }

  handleFormSubmission(formData: any) {
    this.todo.push(formData);
  }

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

我使用以下方法跟踪数组:

  <h1>{{ Monday }}</h1>
  <h1>{{ Tuesday }}</h1>

如何同步它的拖放与实际编码的所有数组？