cdkDrag在没有任何错误或异常的情况下无法正常工作

Question

我正在尝试实现一个Angular组件，该组件应该使用Drag＆Drop处理两个列表之间的元素移动。

左侧显示所选值，右侧显示可用值。

将cdkDrag添加到列表值后，我遇到了问题。一切都停止了工作，包括click事件，在添加cdkDrag之前一切正常。

我知道flex容器内部的Angular Drag＆Drop存在问题。请参阅：https://github.com/angular/components/issues/13372我正在使用那里给出的解决方法，它在应用程序的另一部分工作正常，但是在这里不起作用。

<div style="height: auto;">
  <div style="display: flex; text-align: center; align-items: center;" >
    <div style="flex: 45%">
      <div style="height: 2em; font-weight: bold;" *ngIf="hasSelectedTitle() || hasAvailableTitle()">
        <span>{{selectedTitle}}</span>
      </div>
      <!-- Left-list (selected values) -->
      <div
          cdkDropList
          style="cursor: move;"
          #selectedValuesList="cdkDropList" [cdkDropListConnectedTo]="[availableValuesList]">
        <div *ngFor="let value of selectedValues"
             (click)="clickSelected(value);"
             (cdkDragEntered)="dragSelected($event)"
             [ngStyle]="{'background-color' : isSelectedSelection(value) ? 'lightblue' : 'none'}" cdkDrag>
          <p>
            <span>{{value.displayName}}</span>
          </p>
        </div>
      </div>
    </div>

    <div style="flex: 10%;">
      <!-- controls -->
      <div>
        <button mat-button>
          <i [ngClass]="hasAvailableSelection() ? 'fas fa-angle-left' : 'fas fa-angle-double-left' " ></i>
        </button>
        <button mat-button>
          <i [ngClass]="hasSelectedSelection() ? 'fas fa-angle-right' : 'fas fa-angle-double-right'" ></i>
        </button>
      </div>
    </div>

    <div style="flex: 45%;">
      <div style="height: 2em; font-weight: bold;" *ngIf="hasSelectedTitle() || hasAvailableTitle()">
        <span>{{availableTitle}}</span>
      </div>
      <!-- Right-list (available values) -->
      <div
        cdkDropList
        style="cursor: move;"
        #availableValuesList="cdkDropList" [cdkDropListConnectedTo]="[selectedValuesList]">
        <div *ngFor="let value of availableValues"
             (click)="clickAvailable(value);"
             (cdkDragEntered)="dragAvailable($event)"
             [ngStyle]="{'background-color' : isAvailableSelection(value) ? 'lightblue' : 'none'}" cdkDrag>
          <p>
            <span>{{value.displayName}}</span>
          </p>
        </div>
      </div>
  </div>
</div>

我使用了Angular文档中建议的控件，但是“拖放”功能不起作用。实际上，我没有收到任何错误消息，但是已经设置的click事件也停止被调用。

我无法拖动任何元素，也没有调用(onDragStarted)或类似方法。

非常感谢。