Angular & Mat-table - 如何禁用/启用拖放模式？答案

【问题标题】：Angular & Mat-table - How to disable/enable Drag & Drop mode?Angular & Mat-table - 如何禁用/启用拖放模式？
【发布时间】：2019-11-20 14:55:40
【问题描述】：

我的材料表已启用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

【问题讨论】：

stackoverflow.com/questions/53279829/…

标签： angular drag-and-drop angular-material

【解决方案1】：

你可以使用@Input('cdkDropListDisabled')，它是布尔类型，并通过改变这个输入值来管理它。

将以下代码添加到您的表格中：

[cdkDropListDisabled]="yourBooleanProperty"

然后在您的 enableDragDropMode 函数中根据事件更改 yourBooleanProperty 值:)

希望对你有帮助！

【讨论】：

【解决方案2】：

我找到解决方案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+"

【讨论】：

【解决方案3】：

您可以添加此属性 [cdkDragDisabled] = "true"。参考链接 https://material.angular.io/cdk/drag-drop/api

【讨论】：