我試圖將角度材料的拖放與表格中的調整大小結合起來，但是，目前，兩者都相互重疊。一旦拖放開始，我想要的是取消調整大小，反之亦然。任何幫助都是有用的。謝謝！這是回購：https : //stackblitz.com/edit/flex-table-column-resize-ekrrrq? file = src/app/ app.component.html
uj5u.com熱心網友回復：
您可以為每個目的使用句柄。
例子
用于拖放；代替
<mat-header-cell
*matHeaderCellDef
(mousedown)="onResizeColumn($event, i)"
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
[cdkDragData]="{ name: column.field, columIndex: i }"
(cdkDragStarted)="dragStarted($event, i)"
>
{{ column.field }}
</mat-header-cell>
你可以使用；
<mat-header-cell
*matHeaderCellDef
(mousedown)="onResizeColumn($event, i)"
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
[cdkDragData]="{ name: column.field, columIndex: i }"
(cdkDragStarted)="dragStarted($event, i)"
>
{{ column.field }}
<mat-icon cdkDragHandle>drag_handle</mat-icon>
</mat-header-cell>
類似的調整大小，而不是;
<mat-header-cell
*matHeaderCellDef
(mousedown)="onResizeColumn($event, i)"
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
[cdkDragData]="{ name: column.field, columIndex: i }"
(cdkDragStarted)="dragStarted($event, i)"
>
{{ column.field }}
<mat-icon cdkDragHandle>drag_handle</mat-icon>
</mat-header-cell>
你可以使用；
<mat-header-cell
*matHeaderCellDef
cdkDropList
cdkDropListLockAxis="x"
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="dropListDropped($event, i)"
cdkDrag
[cdkDragData]="{ name: column.field, columIndex: i }"
(cdkDragStarted)="dragStarted($event, i)"
>
{{ column.field }}
<mat-icon cdkDragHandle>drag_handle</mat-icon>
<mat-icon (mousedown)="onResizeColumn($event, i)">switch_left</mat-icon>
</mat-header-cell>
也許更好地處理兩者。
我使用了 mat-icon，你應該將 MatIconModule 從 @angular/material 包匯入到你的模塊中。
Stackblitz 編輯版
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/359301.html
下一篇：單擊錨鏈接僅有時有效