Таблица данных внутри расширяемой таблицы данных в 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.