如何根据条件禁用Angular CDK表格行的拖拽功能？

要实现当item.disable为true时禁用对应行的拖拽，只需利用Angular CDK Drag提供的cdkDragDisabled输入属性，结合行数据的disable字段即可完成，具体操作如下：

1. 为拖拽行添加禁用控制 #

在定义表格行的<tr>标签上，绑定cdkDragDisabled属性到当前行的disable字段：

<tr *matRowDef="let row; columns: displayedColumns" 
    mat-row 
    cdkDrag 
    [cdkDragData]="row"
    [cdkDragDisabled]="row.disable"> <!-- 新增禁用绑定 -->
</tr>

2. 添加视觉反馈（可选） #

为了让用户直观感知该行不可拖拽，可以给禁用行的拖拽手柄添加样式：

<td mat-cell *matCellDef="let element" class="grab-test">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="41"
    viewBox="0 0 23 26"
    width="45"
    style="margin-top: 10px; opacity: {{element.disable ? 0.5 : 1}}; cursor: {{element.disable ? 'not-allowed' : 'grab'}}">
    <!-- svg内容不变 -->
  </svg>
</td>

或者通过CSS类控制更简洁：

/* 利用CDK内置的禁用类 */
.cdk-drag-disabled .grab-test {
  opacity: 0.5;
  cursor: not-allowed;
}

原理说明 #

cdkDragDisabled是Angular CDK Drag官方提供的属性，当值为true时，对应的cdkDrag元素会被完全禁用拖拽功能，不会触发任何拖拽相关事件，同时CDK会自动给禁用元素添加cdk-drag-disabled类，方便做样式定制。

内容的提问来源于stack exchange，提问作者StaticName