bug(Drag and Drop): Drag/drop between connected DropLists in different *ngFor blocks throws error

[AustinHaigh-Hach]

Reproduction

Example (see example-component): https://stackblitz.com/edit/components-issue-wv8n6t

Steps to reproduce:

1. Create 2 *ngFor blocks, each with (at least 1) cdkDropList. Each cdkDropList should contain a single cdkDrag.
2. All DropLists should be connected to eachother (cdkDropListConnectedTo).
3. Drag/drop a cdkDrag element from a DropList in the 1st *ngFor block to a DropList in the 2nd *ngFor block (or vice versa).

Expected Behavior

The cdkDrag element should be moved into the DropList, and no exceptions should be thrown.

Actual Behavior

An exception is thrown (below) and the drag/drop operation is terminated (the cdkDrag element is returned to the last DropList it was in). Note: a slightly different exception is thrown in the stackblitz example above. This exception is thrown when I run that code locally.

zone.js:182 Uncaught TypeError: Cannot read property '_startScrollingIfNecessary' of undefined
at DragRef._updateActiveDropContainer (drag-drop.js:945)
at SafeSubscriber.DragRef._pointerMove [as _next] (drag-drop.js:451)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
at SafeSubscriber.next (Subscriber.js:122)
at Subscriber._next (Subscriber.js:72)
at Subscriber.next (Subscriber.js:49)
at Subject.next (Subject.js:39)
at HTMLDocument.handler (drag-drop.js:2464)
at ZoneDelegate.invokeTask (zone.js:406)
at Zone.runTask (zone.js:178)

Environment

• Angular: 12.0.1
• CDK/Material: 12.0.1
• Browser(s): Chromium Version 90.0.4430.212 (Official Build) snap (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 20.04 LTS

[AustinHaigh-Hach]

This appears to be similar to issue #19241, but PR #19243 doesn't fix this bug.

[AustinHaigh-Hach]

After further investigation, it appears this bug has something to do with the ngFor directive, specifically the ngDoCheck hook (this calls CdkDrag.onDestroy and eventually undefines DragRef._preview - the exception is thrown when DragRef._preview.style is accessed later).

I wrote a very simple ngFor "clone" (below) and an exception is no longer thrown when I use it instead of *ngFor in the example above, but I'm seeing a different issue now. With my custom *appFor directive, sorting doesn't work between DropLists, even if they are all created by the same *appFor loop (ngFor works as expected when all DropLists are in the same group).

@Directive({
  selector: '[appFor]'
})
export class ForDirective {
  @Input() appForOf : any;

  constructor(private templateRef:TemplateRef<any>,
              private viewContainerRef:ViewContainerRef) {
  }

  ngOnInit(){
    this.appForOf.forEach((key, i)=> this.viewContainerRef.createEmbeddedView(this.templateRef, {index:i}));
  }
}