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 with angular 8

Stackblitz with angular 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);
  }

在你的 .ts 中添加这个

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