angular 6 中具有与父行完全相同的列的 angular material 的可扩展行

Question

我已经参与了 angular material 具有可扩展行的项目，并通过参考成功地实现了这些。但是我遇到了一点问题，因为我下面的示例只有一列用于扩展行。所以我的问题是我可以使可扩展行具有与父行完全相同的列吗？如果可能的话，我可以要一些 example/guide 吗？

提前致谢。

我已经尝试在扩展行中制作 table，但问题是 table 与父列对齐有点麻烦。我想如果我可以使用 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>

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

Answer 1

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

您展开的行：

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

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

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

I have modified the stackblitz that I posted there a bit, so that it reflects your needs. It displays the same column definition in the expanded row as well, you just need to set a new datasource.

angular 6 中具有与父行完全相同的列的 angular material 的可扩展行

Expandable row in angular 6 with angular material that have the exact columns as the parent row

angular-material

angular

angular6

mat-table