Angular material 使用CDK拖放时，角度垫列表选项布局会发生更改

我正在开发一个Angular 7 web应用程序，正在努力使用

Mat选择列表

，在该列表中，我允许用户拖放

Mat列表选项

项

每个

mat list选项

项都包含一个

div

，该div使用Flex布局按如下方式排列其组件：

          <mat-selection-list #taskGroupSelectionList
                              cdkDropList
                              [(ngModel)]="selectedOptions"
                              (ngModelChange)="onNgModelChange($event)"
                              (selectionChange)="onSelectionChange($event)"
                              class="task-group-list"
                              (cdkDropListDropped)="drop($event)">

            <mat-list-option class="task-group-box" checkboxPosition="after" *ngFor="let taskGroup of taskGroups" [value]="taskGroup" cdkDrag>

              <!-- Task Group Item -->
              <div fxLayout="row" *ngIf="taskGroup" fxLayoutAlign="start center" style="width: 100%; height: 100%;">

                <!-- Move Handle -->
                <div fxFlex="32px" style="padding: 0 0 0 4px;">
                  <mat-icon class="summary-channel-handle">menu</mat-icon>
                </div>

                <!-- Index -->
                <div fxFlex="24px;">
                  <p style="margin: 0; text-align: right;">
                    {{taskGroup.orderId}}:
                  </p>
                </div>

                <!-- Title -->
                <div fxFlex="nogrow">
                  <p style="margin: 0; padding: 0 0 0 8px; text-overflow: ellipsis; white-space: nowrap;">
                    {{taskGroup.title}}
                  </p>
                </div>

              </div>

            </mat-list-option>

          </mat-selection-list>

.task-group-list {
  width: 100%;
  height: 100%;
  display: block;
  background: white;
}

.task-group-box {
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  border-radius: 4px;
  height: 48px;
  color: rgba(0, 0, 0, 0.87);
  box-sizing: border-box;
  cursor: move;
  background: white;
}

.task-group-box:first-child {
  border: solid 1px #ddd;
}

.task-group-list.cdk-drop-list-dragging .task-group-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  height: 48px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  box-sizing: border-box;
  border-radius: 4px;
  height: 48px;
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

从功能上讲，我可以拖放列表项，但是，当拖动时，我放置在右侧的

checkboxPosition=“after”

复选框将移动到左上角，并向下推动

mat list选项的元素

有人知道为什么拖动时布局会改变吗？
被拖动的元素可以作为DOM中body的最后一个子元素找到（仅在拖动时），正如您所看到的，这会造成很多问题

如果mat list选项元素不是很复杂，只有复选框和一些文本，可以通过向global styles.CSS文件添加一些CSS来解决此问题，例如：

/* Checkbox and text inline and vertically centered */
.cdk-drag-preview .mat-list-item-content {
    display: flex;
    align-items: center;
}

/* Checkbox margin from text */
.cdk-drag-preview .mat-pseudo-checkbox {
  margin-right: 10px;
}

你可以在我创建的stackblitz中看到一个

如果mat list选项元素的内容稍微复杂一些，则需要检查该元素并添加必要的样式。您可以通过拖动mat list选项并在拖动时单击鼠标右键来完成此操作，检查元素并查找可用于设置其样式的类。
尝试使用：：ng deep

::ng-deep .cdk-drag-preview  .mat-list-item-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    padding: 0 16px;
    position: relative;
    height: inherit;
  }

这对我有效
这是答案，应该标记为已接受。