我正在使用角度cdk创建一个简单的拖放应用程序。我只想拖我的 框并将其放到另一个框。但是当释放拖放区域内的拖动框时，出现了错误。请帮助修复它。

我遇到错误

Unhandled Promise rejection: Failed to execute 'appendChild' on 'Node': The new child element contains the parent. ; Zone: <root> ; Task: Promise.then ; Value: DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
    at DragRef._cleanupDragArtifacts (http://localhost:4200/vendor.js:1615:121)
    at http://localhost:4200/vendor.js:1471:22
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:3365:26)
    at Zone.run (http://localhost:4200/polyfills.js:3130:43)
    at http://localhost:4200/polyfills.js:3861:36
    at ZoneDelegate.invoketask (http://localhost:4200/polyfills.js:3397:31)
    at Zone.runTask (http://localhost:4200/polyfills.js:3174:47)
    at drainmicroTaskQueue (http://localhost:4200/polyfills.js:3565:35)
    at Zonetask.invoketask [as invoke] (http://localhost:4200/polyfills.js:3475:21)
    at invoketask (http://localhost:4200/polyfills.js:4609:14) Error: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
    at DragRef._cleanupDragArtifacts (http://localhost:4200/vendor.js:1615:121)
    at http://localhost:4200/vendor.js:1471:22
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:3365:26)
    at Zone.run (http://localhost:4200/polyfills.js:3130:43)
    at http://localhost:4200/polyfills.js:3861:36
    at ZoneDelegate.invoketask (http://localhost:4200/polyfills.js:3397:31)
    at Zone.runTask (http://localhost:4200/polyfills.js:3174:47)
    at drainmicroTaskQueue (http://localhost:4200/polyfills.js:3565:35)
    at Zonetask.invoketask [as invoke] (http://localhost:4200/polyfills.js:3475:21)
    at invoketask (http://localhost:4200/polyfills.js:4609:14)
api.onUnhandledError @ zone-evergreen.js:651
handleUnhandledRejection @ zone-evergreen.js:675
api.microtaskDrainDone @ zone-evergreen.js:668
drainmicroTaskQueue @ zone-evergreen.js:566
invoketask @ zone-evergreen.js:469
invoketask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629

我将在下面粘贴我的代码

我的app.component.html

<section>
  <div class="wrapper">
    <div class="outerBox">
        <div class="innerBox" cdkDropList [cdkDropListConnectedTo]="[dropZone]" cdkDrag></div>
    </div>

    <div class="outerBox" #dropZone="cdkDropList" cdkDropList (cdkDropListDropped)="onItemDrop($event)">
    </div>
  </div>
</section>

和app.component.ts

import { Component } from '@angular/core';
import {cdkDragDrop,moveItemInArray,transferArrayItem} from '@angular/cdk/drag-drop';
@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {

  onItemDrop(event) {
    console.log(event);
  }
}

和app.component.css文件类似

.wrapper {
    display: flex;
}
.outerBox {
    width: 300px;
    height: 500px;
    border: 1px solid #333;
    padding: 10px;
    margin: 10px;
}
.innerBox {
    width: 100px;
    height: 100px;
    background: skyblue;
}

请帮助解决错误。

谢谢。