typescript - รายการลากและวางของ Angular CDK ใช้งานไม่ได้เมื่อข้อมูลของมันถูกสร้างใหม่

ฉันมี cdkDropListGroup ที่มีหลายตาราง (โดยใช้ directive mat-table) ซึ่งฉันพยายามตั้งค่าการลากและวางเพื่อให้สามารถจัดเรียงองค์ประกอบภายในตารางหรือลากไปยังตารางอื่นได้ อย่างไรก็ตาม เมื่อข้อมูลสำหรับรายการลากและวางถูกสร้างใหม่ รายการจะไม่สามารถลากได้และมีการบันทึกข้อผิดพลาดในคอนโซล นี่คือ stackblitz ที่สร้างปัญหานี้ ลองลากแถวระหว่างตารางหรือภายในตารางซ้ำหลายครั้ง ข้อผิดพลาดควรปรากฏและการลากและวางจะติดขัดทุกครั้ง มีวิธีแก้ไขปัญหานี้อย่างไร เนื่องจากในโค้ดจริงของฉัน ข้อมูลนี้มาจากบริการ http บางอย่างและจำเป็นต้องถูกสร้างใหม่ และตารางต้องถูกเติมข้อมูลใหม่ทุกครั้งเมื่อมีการลากและวางรายการไปยังตำแหน่งใหม่?

https://stackblitz.com/edit/angular-e3ajdt

และนี่คือข้อผิดพลาดที่ฉันเห็น

    zone.js:192 Uncaught TypeError: Cannot read property '_getSiblingContainerFromPosition' of undefined
    at DragRef._updateActiveDropContainer (drag-ref.ts:727)
    at SafeSubscriber.DragRef._pointerMove [as _next] (drag-ref.ts:505)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:270)
    at SafeSubscriber.next (Subscriber.ts:212)
    at Subscriber._next (Subscriber.ts:141)
    at Subscriber.next (Subscriber.ts:101)
    at Subject.next (Subject.ts:68)
    at HTMLDocument.handler (drag-drop-registry.ts:127)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Zone.runTask (zone.js:188)
        DragRef._updateActiveDropContainer @ drag-ref.ts:727
        DragRef._pointerMove @ drag-ref.ts:505
        SafeSubscriber.__tryOrUnsub @ Subscriber.ts:270
        SafeSubscriber.next @ Subscriber.ts:212
        Subscriber._next @ Subscriber.ts:141
        Subscriber.next @ Subscriber.ts:101
        Subject.next @ Subject.ts:68
handler @ drag-drop-registry.ts:127
        ZoneDelegate.invokeTask @ zone.js:421
        Zone.runTask @ zone.js:188
        ZoneTask.invokeTask @ zone.js:496
        invokeTask @ zone.js:1540
        globalZoneAwareCaptureCallback @ zone.js:1598
        setTimeout (async)
        scheduleTask @ zone.js:2075
        ZoneDelegate.scheduleTask @ zone.js:407
        Zone.scheduleTask @ zone.js:232
        Zone.scheduleMacroTask @ zone.js:255
        scheduleMacroTaskWithCurrentZone @ zone.js:1114
        (anonymous) @ zone.js:2090
        proto.(anonymous function) @ zone.js:1394
        hostReportError @ hostReportError.ts:7
        SafeSubscriber.__tryOrUnsub @ Subscriber.ts:276
SafeSubscriber.next @ Subscriber.ts:212
Subscriber._next @ Subscriber.ts:141
Subscriber.next @ Subscriber.ts:101
Subject.next @ Subject.ts:68
handler @ drag-drop-registry.ts:127
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCaptureCallback @ zone.js:1598
preview-ee4d58d6ef0576b4e139b.js:1 Unhandled Promise rejection: Cannot read property 'getItemIndex' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'getItemIndex' of undefined
    at eval (drag-ref.ts:710)
    at ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (ng_zone.ts:273)
    at ZoneDelegate.invoke (zone.js:387)
    at Zone.run (zone.js:138)
    at NgZone.run (ng_zone.ts:171)
    at DragRef._cleanupDragArtifacts (drag-ref.ts:700)
    at eval (drag-ref.ts:577)
    at ZoneDelegate.invoke (zone.js:388)
    at Zone.run (zone.js:138) TypeError: Cannot read property 'getItemIndex' of undefined
    at eval (https://angular-e3ajdt.stackblitz.io/turbo_modules/@angular/[email /bundles/cdk-drag-drop.umd.js:895:56)
    at ZoneDelegate.invoke (https://angular-e3ajdt.stackblitz.io/turbo_modules/[email /dist/zone.js:388:26)
    at Object.onInvoke (https://angular-e3ajdt.stackblitz.io/turbo_modules/@angular/[email /bundles/core.umd.js:16186:37)
    at ZoneDelegate.invoke (https://angular-e3ajdt.stackblitz.io/turbo_modules/[email /dist/zone.js:387:32)
    at Zone.run (https://angular-e3ajdt.stackblitz.io/turbo_modules/[email /dist/zone.js:138:43)
    at NgZone.run (https://angular-e3ajdt.stackblitz.io/turbo_modules/@angular/[email /bundles/core.umd.js:16100:32)
    at DragRef._cleanupDragArtifacts (https://angular-e3ajdt.stackblitz.io/turbo_modules/@angular/[email /bundles/cdk-drag-drop.umd.js:883:22)
    at eval (https://angular-e3ajdt.stackblitz.io/turbo_modules/@angular/[email /bundles/cdk-drag-drop.umd.js:363:23)
    at ZoneDelegate.invoke (https://angular-e3ajdt.stackblitz.io/turbo_modules/[email /dist/zone.js:388:26)
    at Zone.run (https://angular-e3ajdt.stackblitz.io/turbo_modules/[email /dist/zone.js:138:43)

คำตอบ #1

แก้ไขปัญหานี้โดยการฉีด ChangeDetectorRef ของ Angular และเรียกใช้ detectChanges() ทุกครั้งที่ข้อมูลถูกสร้างใหม่ในเมธอด populateDataSource