Отображение данных для Dynami c Angular Таблица материалов

Question

Я пытаюсь создать динамическую c angular таблицу материалов с пользовательским заголовком, который я собираюсь использовать позже для проверки правильности оформления таблицы. Я могу успешно отобразить tableHeaders, но у меня нет успеха в отображении tableData. Там нет ошибки. Я новичок в Angular, поэтому любая помощь будет оценена, спасибо!

TS:

    export class DataTableComponent implements OnInit {
    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
    @ViewChild(MatSort, { static: true }) sort: MatSort;
    dataSource

    tableHeader = [
        {
            name: 'id',
            displayName: 'ID',
            type: 'number'
        },
        {
            name: 'name',
            displayName: 'Name',
            type: 'number'
        },
        {
            name: 'age',
            displayName: 'Age',
            type: 'number'
        },
    ];

    tableData = [
        {
            id: 1,
            name: 'Bogart',
            age: 10,
        },
        {
            id: 2,
            name: 'John',
            age: 20,
        },
        {
            id: 3,
            name: 'Mark',
            age: 30,
        }
    ];

    constructor() { }

    ngOnInit() {
        this.dataSource = new MatTableDataSource(this.tableData);
        this.dataSource.sort = this.sort;
    }

    objectKeys(obj) {
        return Object.keys(obj);
    }
}

HTML:

    <table mat-table class="lmat-elevation-z8" [dataSource]="dataSource" matSort matSortActive="id"
        matSortDirection="asc" matSortDisableClear>

        <ng-container [matColumnDef]="tableData" *ngFor="let tableData of objectKeys(tableHeader)">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                <!--arrowPosition="before" -->
                {{tableHeader[tableData].displayName}}
            </th>

            <td mat-cell *matCellDef="let element" class="mat-column-vinCode">
                {{element[tableData]}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="objectKeys(tableHeader); sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: objectKeys(tableHeader)"></tr>
    </table>
</div>

<div class="mat-table__bottom mat-table__bottom--padding">
    <mat-spinner [diameter]="20" *ngIf="dataSource.loading$ | async"></mat-spinner>
    <mat-paginator [pageSize]="6" [pageSizeOptions]="[3, 6, 15]" [length]="dataSource.paginatorTotal$ | async"
        [showFirstLastButtons]="true"></mat-paginator>
</div>

ТАБЛИЦА:

Answer 1

вы используете objectKeys(obj) {return Object.keys(obj);}, это неправильно

Вы можете перебирать tableHeader напрямую:

<!--see that use tableData.displayName to see the "header"-->
<ng-container [matColumnDef]="tableData.name" *ngFor="let tableData of tableHeader>
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                {{tableData.displayName}}
            </th>
<!--and element[tableData.name] so see the field-->
            <td mat-cell *matCellDef="let element" class="mat-column-vinCode">
                {{element[tableData.name]}}</td>
        </ng-container>

В качестве столбцов вам нужно использовать

   getColumns(obj:any) {
     return obj.map(x=>x.name);
  }

    <tr mat-header-row *matHeaderRowDef="getColumns(tableHeader); sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: getColumns(tableHeader)"></tr>