角材料 mat-table 中的 cdkDragHandle 无效

Question

我想知道是否有可能包含定义为垫子图标的单元格

cdkDragHandle。目前它在整行上处于活动状态，但我只想将单个图标用作拖动句柄

这是我正在使用的代码的一部分：

<mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" 
cdkDropList [cdkDropListData]="dataSource"
(cdkDropListDropped)="dropTable($event)">

<ng-container matColumnDef="Order">
  <mat-header-cell *matHeaderCellDef>
    Actions
  </mat-header-cell>
  <mat-cell mat-cell *matCellDef="let element">
    <mat-icon class="dragCursor" cdkDragHandle>reorder</mat-icon>
    {{element.order}}
    <button mat-icon-button (click)="onDeleteClick(element)">
      <mat-icon>delete</mat-icon>
    </button>
  </mat-cell>
</ng-container>

... more column definitions

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag    [cdkDragData]="row" cdkDragLockAxis="y"></mat-row>

我还尝试在 mat-cell 上定义拖动手柄，但无济于事。有谁知道如何解决这个问题？

提前致谢！

Answer 1

似乎cdkDragHandle对mat-table.

使用最新的 Angular Material 版本 v. 9.1.0 进行测试。

这个错误也在 Github 上讨论过，我在那里找到了以下解决方案：https : //github.com/angular/components/issues/13770#issuecomment-506182564 - author ajp76054。

我在我的项目中使用过它，它似乎工作正常。

我会把它贴在这里给需要它的人：

使用cdkDragDisabled属性设置为初始化表，true以禁用整个拖动容器。这允许用户仍然与表格单元格交互，直到他们准备好拖动行。

然后在拖动手柄元素 ( <mat-icon>) 上，使用(mousedown)event 将 设置cdkDragDisabled为false。然后，将其重置到事件处理程序true内部(cdkDropListDropped)。

因此，在模板中使用以下代码：

<mat-table 
   #table 
   [dataSource]="dataSource" 
   cdkDropList 
   (cdkDropListDropped)="drop($event)" 
   cdkDropListData="dataSource" 
   [cdkDropListDisabled]="dragDisabled">

 ...

 <ng-container matColumnDef="order">
   <mat-header-cell *matHeaderCellDef>Order</mat-header-cell>
   <mat-cell *matCellDef="let element"> 
    <mat-icon class="dragCursor" (mousedown)="dragDisabled = false;">reorder</mat-icon>
   </mat-cell>
 </ng-container>

 ...

 <mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag [cdkDragData]="row"></mat-row>


</mat-table>

在组件ts文件中：

export class TableBasicExample {
  dragDisabled = true;

  drop(event: CdkDragDrop<any[]>) {
    // Return the drag container to disabled.
    this.dragDisabled = true;

    // other code on drop event
    // 
    const previousIndex = this.dataSource.findIndex((d) => d === event.item.data);

    moveItemInArray(this.dataSource, previousIndex, event.currentIndex);
this.table.renderRows();
  }

}

工作示例

https://stackblitz.com/edit/angular-materials-table-with-drag-and-drop-nvyyy4