Question

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

谢谢。

我已经尝试在扩展行中创建一个表，但是问题是该表与父列对齐有点麻烦。我想是否可以在没有[datasource]的情况下使用与父表相同的mat-table，因为我要显示的数据已经在扩展行中。

<!-- 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，以便进行修改反映您的需求。它会在扩展行，您只需设置一个新的数据源。

角6中的可扩展行，其角材料与父行具有相同的列

1 个答案: