建立动态数据表材料角度

Question

我有这个 api 数据：

dataSource = [
    [
        parent: [
            {
                value: 'Value 1'
            },
            { 
                value: 'Value 2' 
            }
        ],
        childs: [
           {
               id: 1,
               columns: [
                   {
                      value: 'Value 3'
                   },
                   {
                      value: 'Value 4'
                   }    
               ]
           },
           {
               id: 2,
               columns: [
                   {
                      value: 'Value 5'
                   },
                   {
                      value: 'Value 6'
                   }    
               ]
           }
        ]
    ]
];

dataTableColumns = [
   0 => 'Column 1',
   1 => 'Column 2'
]

我的代码：

<mat-table [dataSource]="dataSource" matSort *ngIf="dataSource.filteredData.length >= 0">

    <ng-container matColumnDef="{{ key }}" *ngFor="let key of dataTableColumns">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ dataTableColumnsNames[key] }}
        </mat-header-cell>

        <ng-container *matCellDef="let row">
            <mat-cell *ngIf="row.childs">
                {{ row.childs.columns[key].value }}
            </mat-cell>
        </ng-container>

        <ng-container *matCellDef="let row">
            <mat-cell *ngIf="row.parent">
                {{ row.parent[key].value }}
            </mat-cell>
        </ng-container>
    </ng-container>

    <mat-header-row *matHeaderRowDef="dataTableColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: dataTableColumns;">
    </mat-row>
</mat-table>

我想显示类似的东西：

Column 1                    Column 2
Value 1                     Value 2
Value 3                     Value 4
Value 5                     Value 6

你能帮我一些建议吗？我没有找到一些如何动态构建它的示例。这个想法是我想先显示数组中的一些列，然后显示另一个数组中的列。提前感谢并为我的英语感到抱歉