Angular材质表拖放不允许在第一列中拖放

Question

我有一个动态材料表，第一列有查看详细信息，编辑等选项。所以我只希望在第一列之后允许删除。我如何才能实现这一点或使用cdkDragBoundary与mat表

<table mat-table [dataSource]="dataSource" 
cdkDropList
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="drop($event)">
<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns; let i=index" [sticky]="isFirstColumn(column)">
<th mat-header-cell *matHeaderCellDef cdkDrag>
<ng-container *ngIf="!isFirstColumn(column)">
<div style="float: right">
<button type="button"
class="drag-handle sm-icon-button"
[disabled]="isEditDisabled"
mat-icon-button cdkDragHandle>
<mat-icon>drag_handle</mat-icon>
</button>
</div>
{{ column}}
</ng-container>
</th>
<td mat-cell *matCellDef="let element" class="w-100 col-left">
<ng-container *ngIf="isFirstColumn(column)">
<button mat-icon-button>
<mat-icon>
list
</mat-icon>
</button>
<button mat-icon-button
[disabled]="isEditDisabled"
(click)="onEdit(element)">
<mat-icon>
edit
</mat-icon>
</button>
</ng-container>
<span>{{element[column]}}</span>
</ng-container>
<ng-container *ngIf="!isFirstColumn(column)">
<ng-container *ngIf="editing.Id && element.Id === editing.Id">
<input id="{{column}}{{i}}" [(ngModel)]="element[column]" size="10" />
</ng-container>
<ng-container *ngIf="!editing.Id || element.Id !== editing.Id">
{{element[column]}}
</ng-container>
</ng-container>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Answer 1

我有同样的问题，但设法通过以下代码解决它。用户仍然可以拖放，但是在拖放之后，我们阻止了原始数组的改变。

drop(event: CdkDragDrop<any>) {
if(event.currentIndex == 0) {
return;
}
moveItemInArray(this.dataSource, event.previousIndex, event.currentIndex);
}