Question

我想使用material angular 2中的mat-table创建一个可扩展的数据表。行可以包含子行。

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

使用材质角度表组件或mat-table，可以定义多个行类型，并选择应用于当前迭代的行。

但是有没有办法在同一次迭代中生成多种行？

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

我尝试从this answer开始关注模型。

所以我在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

了解更多信息

材料角表多行指令

1 个答案: