如何将一个数组项转移到另一个数组并使用Angular Material更新它拖放CDK而不将这两个数组项绑定到同一个参数

npm install @angular/material @angular/cdk

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  sourceArray: any[] = [1, 2, 3, 4, 5];
  targetArray: any[] = [];

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

<div cdkDropList [cdkDropListData]="sourceArray" (cdkDropListDropped)="drop($event)">
  <div class="item" *ngFor="let item of sourceArray" cdkDrag>{{ item }}</div>
</div>

<div cdkDropList [cdkDropListData]="targetArray" (cdkDropListDropped)="drop($event)">
  <div class="item" *ngFor="let item of targetArray" cdkDrag>{{ item }}</div>
</div>

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}