Angular & Mat-table - 如何disable/enable拖放模式？

Question

我的 material table 启用了 Drag & Drop。我想将切换按钮添加到 Disable/Enable 此模式。

我的 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

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

将以下代码添加到您的 table:

[cdkDropListDisabled]="yourBooleanProperty"

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

希望对您有所帮助！

Answer 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+"

Answer 3

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

Angular & Mat-table - 如何disable/enable拖放模式？

Angular & Mat-table - How to disable/enable Drag & Drop mode?

drag-and-drop

angular-material

angular