使用 table-expandable-rows 材料表拖放行答案

【问题标题】：drag and drop rows with table-expandable-rows marerial table使用 table-expandable-rows 材料表拖放行
【发布时间】：2021-01-10 21:29:05
【问题描述】：

使用拖放行的 Angular Material table-expandable-rows 存在问题。拖放根本不起作用

这里是drop函数：

export class AppComponent  {
  @ViewChild('table') table: MatTable<PeriodicElement>;
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
  expandedElement: PeriodicElement | null;
  
  dropTable(event: CdkDragDrop<PeriodicElement[]>) {
    const prevIndex = this.dataSource.findIndex((d) => d === event.item.data);
    moveItemInArray(this.dataSource, prevIndex, event.currentIndex);
    this.table.renderRows();
  }
}

这里是示例代码 StackBlitz

【问题讨论】：

编辑：拖放功能有效但每行的扩展信息不能正常工作 - 它总是显示

标签： javascript angular angular-material

【解决方案1】：

现在我和你有同样的问题，但我想我已经找到了解决方案。基本上问题出在您引用 cdkDrag 的那一行。除了 CSS 之外，我还粘贴了一个非常难看但可以正常工作的 CSS。当我准备好时，我会保持良好状态

https://angular-bgjaeg.stackblitz.io

https://stackblitz.com/edit/angular-bgjaeg?file=src%2Fapp%2Fapp.component.html

【讨论】：

请不要只分享链接，最好从链接中复制相关代码，因为链接并不总是会永远存在。