bug(cdkDropList): cdkDropList doesn't pick up dynamically added connected dropLists.

#### Reproduction

We have a use case where we must dynamically add extra cdkDropList on the fly. In the [this StackBlitz](https://stackblitz.com/edit/cdk-droplist-sample-1) this is simulated by a ngIf.
When you drag an item from folder-2 to folder-0 folder 1 will open, but it doesn't accept the items. However, if you move it first to 0 then to 2, and back to 1, it will suddenly do. The same goes for eventual multiple added lists.

#### Expected Behavior

The behavior one would expect is demonstrated in [this StackBlitz](https://stackblitz.com/edit/cdk-droplist-sample-workaround?file=src/app/app.component.ts).
While this is working it's using undocumented internals, and forcing the connectedTo in 2 different ways, where I can not predict long-term stability.

#### Actual Behavior
The actual behavior is demonstrated in the first linked StackBlitx.
When we go from this:
to:
The folder-1 isn't accepting the item dragged on top of it

#### Environment

- Angular: 11.any
- CDK/Material: 11.any
- Browser(s): all
- Operating System (e.g. Windows, macOS, Ubuntu): all

Start with the two linked StackBlitz reproductions, especially src/app/app.component.ts in the workaround, and reproduce the drag after ngIf adds folder-1. Trace how cdkDropList discovers connected lists during that update. Done means a dynamically added list accepts the item on the first drag without relying on undocumented internals; the payload names no project test.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.