材料角度表多行指令

Question

我想使用材料 Angular 2中的 mat-table 制作一个可扩展的数据表。行可以包含子行。

我的行数据是一个可以包含其他子对象的对象。

使用材料角度表组件或垫表，可以定义多个行类型并选择应用于当前迭代的一种。

---

但是有没有办法在同一次迭代期间生成多种类型的行？

我是否被迫将子项目添加到为 mat-tabke 提供数据的数据源中，或者可以为其提供包含子项目的项目并生成 1 行包含项目数据的行，并为每个子项目生成 1 行？

---

我尝试遵循此答案中的模型。

所以我在我的 component.ts 中定义了这些行

<mat-row *matRowDef="let rule; columns: ['expandedDetail']; when: isExpansionDetailRow"
                 [@detailExpand]="rule.element == expandedElement ? 'expanded' : 'collapsed'"
                 style="overflow: hidden">
        </mat-row>
        <mat-row *matRowDef="let rule; columns: ['expandedDetail']; when: isExpansionDetailRow"
                 [@detailExpand]="rule.element == expandedElement ? 'expanded' : 'collapsed'"
                 style="overflow: hidden">
        </mat-row>

但似乎当 isExpansionDetail 为 true 并且选择第二行类型时，它会“覆盖”第一个行类型，而不会生成第一个行类型。

Answer 1

检查这是否适合您，将下一个属性添加到您的表multiTemplateDataRows

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>

在这里阅读更多信息https://material.angular.io/cdk/table/api