角材料 mat-table 中的 cdkDragHandle 无效 [英] cdkDragHandle in angular material mat-table has no effect

问题描述

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

I want to know if it is possible to have a cell that contains a mat-icon defined as

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

cdkDragHandle.At the moment it is active on the full row but I just want the single icon to be used as draghandle

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

This is part of the code I'm using:

<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 上定义拖动手柄，但无济于事.有人知道如何解决吗?

I also tried to define the draghandle on the mat-cell to no avail. Does anybody know how this can be solved?

提前致谢！

推荐答案

cdkDragHandle 似乎不适用于 mat-table.

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

Tested with latest Angular Material version, v. 9.1.0.

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

This bug was also discussed on Github, where I've found the following solution: https://github.com/angular/components/issues/13770#issuecomment-506182564 - author ajp76054.

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

I've used it in my project and it seems to work ok.

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

I'll post it here for those who will need it:

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

Initialize the table with cdkDragDisabled property set to true, in order to disable the whole drag container. This allows the user to still interact with the table cells until they are ready to drag the row.

然后在拖动手柄元素()上，使用(mousedown)事件将cdkDragDisabled设置为<代码>假.然后，在 (cdkDropListDropped) 事件处理程序中将其重置为 true.

Then on the drag handle element (<mat-icon>), use (mousedown) event to set the cdkDragDisabled to false. Then, reset it to true inside the (cdkDropListDropped) event handler.

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

So, in the template use the following code:

<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/角材料表与拖放nvyyy4

这篇关于角材料 mat-table 中的 cdkDragHandle 无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！