Angular Material Table如何通过布尔标志禁用列拖拽？解决属性报错

云上老周

2026-7-18

问题与解决方案

问题描述

使用Angular Material Table时，给table标签添加[cdkDragDisabled]="!editMode"试图禁用列拖拽，出现错误：

template.html:26 NG0303: Can't bind to 'cdkDragDisabled' since it isn't a known property of 'table' (used in the 'TableDataComponent' component template).
If 'table' is an Angular component and it has the 'cdkDragDisabled' input, then verify that it is a part of an @NgModule where this component is declared.
To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

询问是否可以通过布尔标志禁用列拖拽。

解决方案

可以通过布尔标志禁用列拖拽，但你的用法有误，具体修正方式如下：

1. 错误原因

cdkDragDisabled是**cdkDrag指令的输入属性**，用于控制单个可拖拽元素的禁用状态，而不是cdkDropList（table标签上的拖拽容器指令）的属性，因此不能直接绑定在table标签上。

2. 正确实现方式

列拖拽的核心是每一列的表头元素（th），需要给每个列的表头添加cdkDrag指令，并将cdkDragDisabled绑定到你的布尔变量（如editMode）上：

<!-- 示例列定义 -->
<ng-container matColumnDef="id">
  <th mat-header-cell *matHeaderCellDef cdkDrag [cdkDragDisabled]="!editMode"> ID </th>
  <td mat-cell *matCellDef="let item"> {{item.id}} </td>
</ng-container>

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef cdkDrag [cdkDragDisabled]="!editMode"> 名称 </th>
  <td mat-cell *matCellDef="let item"> {{item.name}} </td>
</ng-container>

3. 额外注意事项

确保你的模块已导入DragDropModule：

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    // ...其他导入
    DragDropModule
  ]
})
export class YourModule { }