角度 6 中的可扩展行，具有角度材料，具有作为父行的确切列

Question

我已经参与了具有可扩展行的角材料项目，并通过引用 here 成功制作了这些项目。但是我遇到了一些问题，因为我遵循的示例只有一列用于扩展行。所以我的问题是我可以使可扩展行具有与父行完全相同的列吗？如果可能的话，我可以提供一些示例/指南吗？

提前致谢。

我已经尝试在展开的行中制作表格，但问题是表格与父列对齐有点麻烦。我想我是否可以像使用父列一样使用 mat-table，只是没有 [datasource]，因为我尝试显示的数据已经在展开的行中。

<!-- Expanded Column - The detail row is made up of this one column -->
<ng-container matColumnDef="expandedDetail">
  <mat-cell *matCellDef="let detail"> -- Im want to use data in 'detail'
    -- table in here that has the same column as the parent table --
  </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"
        matRipple 
        class="element-row" 
        [class.expanded]="expandedElement == row"
        (click)="expandedElement = row"></mat-row>
<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
        [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
        style="overflow: hidden"> 
</mat-row>

假设表格有 5 个父列，所以我希望扩展行也有 5 个列，它们遵循父列的宽度。

Answer 1

您需要告诉展开的行您希望它跨越多少列。如果您希望它跨越所有列，您可以使用[attr.colspan]="displayedColumns.length"。

您的展开行：

<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">

如果您想以表格格式显示数据，不幸的是我认为您必须在展开的行中添加另一个 mat-table，我认为您不能“重用”已经存在的表格。

查看我之前对类似问题here 的回答。

我已经修改了我在那里发布的stackblitz，以便它 反映您的需求。它在 扩展行，你只需要设置一个新的数据源。