Angular Material中可扩展数据表内部的数据表

Question

我已经制作了一个可扩展数据表，我想在扩展行内显示另一个数据表。这是我的扩展行模板：

<ng-template #tpl let-element>
<div class="mat-row detail-row">
    <mat-table #table1 [dataSource]="element.details" matSort>

        <ng-container matColumnDef="taste">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Taste </mat-header-cell>
            <mat-cell *matCellDef="let detail"> {{detail.taste}} </mat-cell>
        </ng-container>
        <ng-container matColumnDef="water">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Water </mat-header-cell>
            <mat-cell *matCellDef="let detail"> {{detail.water}} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="detailsColumns; sticky: true"></mat-header-row>
        <mat-row *matRowDef="let row; columns: detailsColumns;" matRipple class="element-row">
        </mat-row>
    </mat-table>
</div>

当单击外部表的行时，内部表可以正常工作，但内部不显示任何数据。

如何使其工作？

Answer 1

好的，此解决方案效果很好，问题出在我的CSS中。