Угловые списки перетаскивания CDK ломаются, когда их данные восстанавливаются - PullRequest
Новая
       54

Угловые списки перетаскивания CDK ломаются, когда их данные восстанавливаются

0 голосов
/ 04 марта 2019

У меня есть cdkDropListGroup с несколькими таблицами (с директивой mat-table), которые я пытаюсь настроить перетаскиванием так, чтобы элементы в таблице можно было переставить или перетащить в другую таблицу.Однако, когда данные для списков перетаскивания создаются заново, элемент не перетаскивается, и в консоли регистрируется ошибка. Здесь - блик стека, воссоздающий проблему.Попробуйте перетаскивать строки между таблицами или внутри таблиц несколько раз, должны появиться ошибки, а перетаскивание должно зависать каждые несколько попыток.Как решить эту проблему, поскольку в моем реальном коде эти данные поступают из какой-то службы 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/cdk@7.3.0/bundles/cdk-drag-drop.umd.js:895:56)
    at ZoneDelegate.invoke (https://angular-e3ajdt.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:388:26)
    at Object.onInvoke (https://angular-e3ajdt.stackblitz.io/turbo_modules/@angular/core@7.1.0/bundles/core.umd.js:16186:37)
    at ZoneDelegate.invoke (https://angular-e3ajdt.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:387:32)
    at Zone.run (https://angular-e3ajdt.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:138:43)
    at NgZone.run (https://angular-e3ajdt.stackblitz.io/turbo_modules/@angular/core@7.1.0/bundles/core.umd.js:16100:32)
    at DragRef._cleanupDragArtifacts (https://angular-e3ajdt.stackblitz.io/turbo_modules/@angular/cdk@7.3.0/bundles/cdk-drag-drop.umd.js:883:22)
    at eval (https://angular-e3ajdt.stackblitz.io/turbo_modules/@angular/cdk@7.3.0/bundles/cdk-drag-drop.umd.js:363:23)
    at ZoneDelegate.invoke (https://angular-e3ajdt.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:388:26)
    at Zone.run (https://angular-e3ajdt.stackblitz.io/turbo_modules/zone.js@0.8.26/dist/zone.js:138:43)

1 Ответ

0 голосов
/ 04 марта 2019

Исправлено это путем внедрения Angle's ChangeDetectorRef и вызова DeteChanges () каждый раз, когда данные повторно создаются в методе populateDataSource.

...