角材料表折叠/展开完整表，因此只有标题可见

Question

我的页面上有许多材料表，为了使浏览更轻松，我希望在单击标题（或标题内的小按钮）时使完整的表折叠/展开。我找到了很多关于如何扩展表格行的示例，但我需要折叠整个表格。

Answer 1

我只是想在 mat-expansion 面板中使用 mat-table。

我试了一下，我相信它会满足你的要求。

请检查此Stackblitz 是否满足您的要求。

Answer 2

解决方案：

点击折叠时，我将一个空数组分配给该表的数据源。单击展开时，我将原始数组重新分配给该表的数据源。这样，包含表格总计的页眉和页脚单元格仍然可见，但内部单元格不可见。

类似下面的代码应该允许这种行为：

collapse(index: number) {
if (this.contracts[index].tabledatasource.data.length == 0) {
  this.contracts[index].tabledatasource = new MatTableDataSource(this.stockArray[index]);
} else {
  this.contracts[index].tabledatasource = new MatTableDataSource([]);
}


}

Answer 3

参考：https://www.freakyjolly.com/expand-collapse-single-or-multiple-rows-in-angular-98-material-table-multiple-single/#.XvT6fSgzZPY

Expandable table rows in angular 4 with angular material