Angular&Mat-table-如何禁用/启用拖放模式?

问题描述 投票:0回答:1

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

我的HTML模板:

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

我的typeScript组件:

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

enter image description here

在线演示HERE

angular drag-and-drop angular-material
1个回答
0
投票

您可以使用@Input('cdkDropListDisabled'),它是布尔类型,可以通过更改此输入值进行管理。

将以下代码添加到表中:

[cdkDropListDisabled]="yourBooleanProperty"

然后在enableDragDropMode函数内部,根据事件来更改yourBooleanProperty值:)

希望有帮助!

© www.soinside.com 2019 - 2024. All rights reserved.