无法拖动 Angular Material MatSort 禁用的列答案

【问题标题】：Angular Material MatSort disabled columns cannot be dragged无法拖动 Angular Material MatSort 禁用的列
【发布时间】：2020-10-17 03:50:34
【问题描述】：

使用 Angular Material，我有一个带有 MatSort 的 Material 表，以允许对某些（但不是全部）列进行排序，并拖放到列标题上以允许更改列顺序。

问题是：禁用排序的列，无法拖动

可以在https://stackblitz.com/edit/angular-mat-table-columns-draggable?file=src%2Fapp%2Fapp.component.html 中通过添加以下行来重现该问题

[disabled]="i%2==0"

现在只能拖动第二列和第四列。

【问题讨论】：

标签： angular-material drag-and-drop

【解决方案1】：

这是因为整个组件 (mat-header-cell) 被禁用，这会禁用 click 事件，进而导致 cdkDrag 事件根本不会触发。虽然它有点难看，但您可以有条件地将 mat-header-cell 的模板切换为具有或不具有 mat-sort-header 指令。那么你就不必回退到[disabled] 输入：

<ng-container *ngIf="column.canSort">
  <mat-header-cell *matHeaderCellDef
    cdkDropList
    cdkDropListLockAxis="x"
    cdkDropListOrientation="horizontal"
    (cdkDropListDropped)="dropListDropped($event, i)"
    cdkDrag
    (cdkDragStarted)="dragStarted($event, i)"
    [cdkDragData]="{name: column.field, columIndex: i}" mat-sort-header>
    {{ column.field }}
  </mat-header-cell>
</ng-container>
<ng-container *ngIf="!column.canSort">
  <mat-header-cell *matHeaderCellDef
    cdkDropList
    cdkDropListLockAxis="x"
    cdkDropListOrientation="horizontal"
    (cdkDropListDropped)="dropListDropped($event, i)"
    cdkDrag
    (cdkDragStarted)="dragStarted($event, i)"
    [cdkDragData]="{name: column.field, columIndex: i}">
    {{ column.field }}
  </mat-header-cell>
</ng-container>

在上面的示例中，我在列上添加了 canSort 属性，但当然您可以使用您的上述谓词 ("i%2==0")。

希望这会有所帮助。

【讨论】：