在角度材料表中添加嵌套行

如何解决在角度材料表中添加嵌套行

我想创建这样的东西，但我不希望它成为扩展面板，因为我希望基于添加和删除按钮动态添加或删除嵌套行。我有一个包含多行的材料数据表，想在 2 行之间添加嵌套行，这些嵌套行可以是 n 个数字，我可以增加或减少 n 的值。 enter image description here

解决方法

据我所知，Angular Material 不适合嵌套行。

我通过维护一个“平面”表并更改子/嵌套行的样式来解决这个问题。为此，需要对数据进行排序，以便将每一行的子行放在其后。

订购示例

1. 第 1 行
2. 第 1 行嵌套第 1 行
3. 第 1 行嵌套第 2 行
4. 第 2 行
5. 第 2 行嵌套第 1 行
6. 等

一旦数据被排序，您需要识别并将您的类应用于嵌套行。

CSS - 嵌套行类示例：

  .example-table {
    width: 100%;
   
    .cdk-column-a {
     
    }

    ..

    .sub-level-row {
      td {
        font-size: 11px;
        opacity: 0.85;
        border-bottom: 1px solid;
      }
    }
  }

HTML - 使用 [ngClass] 将类应用于嵌套行：

  <tr mat-row [ngClass]="{'sub-level-row': isSubLevelRow(rowData)}"
  *matRowDef="let rowData; columns: tableColumns"></tr>

TS - 确定行是否嵌套：

  isSubLevelRow(rowData) {
    // use your data to determine if nested row
    return rowData.parentId !== null;
  }

结果：

应用填充、边距、颜色等以获得更多嵌套外观。