Question

我对Angular Material有疑问：我需要在表中使用拖放功能，但是它不起作用。

这是我的component.ts代码：

public PersonalDetails(String name, String sy, String idNo){

Answer 1

您的列表必须标记为cdkDropList并绑定到[cdkDropListData]="data"。如果要将项目从一个列表拖到另一个列表，则必须将其与[cdkDropListConnectedTo]="ids"

连接

在component.ts中，尝试：

moveItemInArray(
  event.container.data,
  event.previousIndex,
  event.currentIndex);

Answer 2

不幸的是，在Material Tables上使用cdkDragDrop时，实际上更新数据有些奇怪。我创建了一个工作环境，您可以查看：https://stackblitz.com/edit/table-drag-n-drop

重要的是表数据需要手动更新，这是我的拖放功能：

  drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
  moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
  transferArrayItem(event.previousContainer.data,
                    event.container.data,
                    event.previousIndex,
                    event.currentIndex);
}

// updates moved data and table, but not dynamic if more dropzones
this.dataSource.data = clonedeep(this.dataSource.data);
this.dataSource2.data = clonedeep(this.dataSource2.data);

}

Angular Material拖放到表格中

2 个答案: