angular - cdkDropListDropped 从未在 Angular 10 和材料表中触发

Question

我正在使用 cdkDropList 重新排序材料表中的列。

在版本 8 之前一切正常，但是在更新到版本 10 之后，cdkDropListDropped永远不会被触发。

<table mat-table #table [dataSource]="dataSource" 
  cdkDropListGroup>
      <ng-container *ngFor="let disCol of headers; let colIndex = index" matColumnDef="{{disCol.field}}">
          <th mat-header-cell layout-align="start center" class="centered" *matHeaderCellDef
              cdkDropList
              cdkDropListLockAxis="x"
              cdkDropListOrientation="horizontal"
              (cdkDropListDropped)="dropListDropped($event, colIndex)"
              cdkDrag
              (cdkDragStarted)="dragStarted($event, colIndex)"
              [cdkDragData]="{name: disCol.field, columIndex: colIndex}">
            {{disCol.field}}
          </th>
          <td mat-cell layout-align="start center" class="centered" *matCellDef="let row " > {{row[disCol.field]}}
          </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
        style="pointer-events: none;"
        >
      </tr>
    </table>

似乎 cdkDropList 和 cdkDrag 不能包含在同一个标​​签中。

有人知道发生了什么吗？

Stackblitz 角度为 8

Stackblitz 角度为 10

Answer 1

尝试这个

<table mat-table #table [dataSource]="dataSource" cdkDropListOrientation="horizontal"
       cdkDropList  (cdkDropListDropped)="drop($event)">
  <ng-container *ngFor="let disCol of headers; let colIndex = index" matColumnDef="{{disCol.field}}">
    <th mat-header-cell layout-align="start center" class="centered" *matHeaderCellDef
        cdkDropList
        cdkDropListLockAxis="x"
        cdkDropListOrientation="horizontal"
        (cdkDropListDropped)="dropListDropped($event, colIndex)"
        cdkDrag
        (cdkDragStarted)="dragStarted($event, colIndex)"
        [cdkDragData]="{name: disCol.field, columIndex: colIndex}">
      {{disCol.field}}
    </th>
    <td mat-cell layout-align="start center" class="centered" *matCellDef="let row " > {{row[disCol.field]}}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
      style="pointer-events: none;"
  >
  </tr>
</table>

并在 .ts

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.displayedColumns, event.previousIndex, event.currentIndex);
  }

在 You .ts 添加这个

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