Angular＆Mat-table-如何禁用/启用拖放模式？

Question

我的材料表启用了Drag & Drop。我想要添加切换按钮以禁用/启用此模式。

我的HTML模板：

<table mat-table #table [dataSource]="dataSource | periodicElementFilter:periodicElementFilter" class="mat-elevation-z8"
  cdkDropList
  (cdkDropListDropped)="dropTable($event)">
    ...
</table>

我的typeScript组件：

enableDragDropMode(event: MatSlideToggleChange) {
  // ???
}

在线演示HERE

Answer 1

我找到了解决方法HERE：

<table mat-table #table [dataSource]="dataSource | periodicElementFilter:periodicElementFilter" class="mat-elevation-z8"
  cdkDropList
  (cdkDropListDropped)="dropTable($event)"
  [cdkDropListDisabled]="dragDisabled">

和

enableDragDropMode(event: MatSlideToggleChange) {
  this.dragDisabled = !event.checked
}

并将Angular升级到8.0.3+和“ @ angular / material”：“ 8.0.1 +”

Answer 2

您可以使用@Input（'cdkDropListDisabled'）（它是布尔类型），并可以通过更改此输入值来对其进行管理。

将以下代码添加到表中：

[cdkDropListDisabled]="yourBooleanProperty"

然后在enableDragDropMode函数内部根据事件来更改您的BooleanProperty值：）

希望有帮助！