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 中。