Angular 在芯片列表之间切换时，角度材质拖放占位符未正确显示

我使用的是有角度的材料10，我试图使用户能够在两个芯片列表之间拖放芯片。其中一个芯片列表开始为空。为了让人们能够将任何东西放到列表中，我设置了子包装的最小高度，以便有地方可以放下芯片（这也是不理想的，因此可以选择其他方法）

我的主要问题是，当用户将芯片拖动到新列表上时，占位符芯片不会放置在Angular创建的芯片列表包装器中，而是作为包装器的同级元素。因此，占位符只是悬挂在包装器的空白处。一旦用户删除了元素，实际的元素就被正确地放置在包装器中

显示问题的闪电战

有没有办法修复它，使占位符元素实际放置在芯片列表包装器中，以便正确呈现

app.component.html

<div id='mainView'>

  <h3>Primary One</h3>
  <mat-chip-list 
    cdkDropList
    id='primary-list'
    [cdkDropListData]='primaryOptions'
    [cdkDropListConnectedTo]="['secondary-list']"
    (cdkDropListDropped)='drop($event)'
    class='mat-chip-list-stacked drag-area'
    aria-orientation="vertical">
    <mat-chip 
      *ngFor='let i of primaryOptions'
      cdkDrag
      [removable]="true" 
      style='width: auto;'>
      {{i}}
      <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>

  <h3>Secondary List</h3>
  <mat-chip-list 
    cdkDropList
    id='secondary-list'
    [cdkDropListData]='secondaryOptions'
    [cdkDropListConnectedTo]="['primary-list']"
    (cdkDropListDropped)='drop($event)'
    class='mat-chip-list-stacked drag-area'
    aria-orientation="vertical">
    <mat-chip 
      *ngFor='let i of secondaryOptions'
      cdkDrag
      [removable]="true" 
      style='width: auto;'>
      {{i}}
      <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>

</div>

import { Component, VERSION } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  primaryOptions = [
    'Apple',
    'Carrot',
    'Banana',
  ];
  secondaryOptions = [];
  drop(event: CdkDragDrop<any>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }    
  }
}

#mainView {
  padding: 10px;
}

:host /deep/ .drag-area .mat-chip-list-wrapper {
  border: solid 1px #ccc;
  border-radius: 4px;
  min-height: 36px;
}

.drag-area {
  border: solid 1px red;
}