1

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

提前致谢。

我已经尝试在扩展行中创建一个表格，但问题是表格与父列对齐有点麻烦。我想如果我可以使用 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 个列，它们遵循父列的宽度。

4

1 回答 1

4

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

您的扩展行：

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

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

在此处查看我之前对类似问题的回答。

我已经修改了我在那里发布的stackblitz，以便它反映您的需求。它在展开的行中也显示相同的列定义，您只需要设置一个新的数据源。

于 2019-04-11T06:28:33.730 回答