mat-table создает столбцы динамически по сравнению со статической таблицей изменений

Question

Извините, если этот вопрос тривиален, я очень плохо знаком с Angular и Web UI Kingdom

В настоящее время я рассматриваю этот пример проекта: https://github.com/marinantonio/angular-mat-table-crud

Я заменялспособ создания столбцов (от статического до динамического), а компоновка таблицы превратилась в нечто, что трудно читать.У меня проблемы с пониманием, как / почему это происходит.Какая разница в том, как я создал свои столбцы?Но, самое главное, как мне это исправить?

Вот что у меня есть:

componentnent.html:

<ng-container *ngFor="let column of columns" matColumnDef="{{column.name}}">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>
  <td mat-cell *matCellDef="let row"> {{row[column.name]}} </td>
</ng-container>

component.ts

columns: Array<any> = [
    { name: 'id',         label: 'ID',         cell: (element: any) => `${element.id}` },
    { name: 'title',      label: 'Title',      cell: (element: any) => `${element.title}` },
    { name: 'state',      label: 'State',      cell: (element: any) => `${element.state}` },
    { name: 'url',        label: 'Url',        cell: (element: any) => `${element.url}`},
    { name: 'created_at', label: 'Created at', cell: (element: any) => `${element.created_at}`},
    { name: 'updated_at', label: 'Updated at', cell: (element: any) => `${element.updated_at}`},
]
// displayedColumns = ['id', 'title', 'state', 'url', 'created_at', 'updated_at', 'actions'];
displayedColumns = this.columns.map(x => x.name).concat(['actions']);

Я не трогал компоненты.css

Answer 1

Я нашел решение !!!

использовать cdkColumnDef и cdkHeaderCellDef вместо matColumnDef и mat-header-cell

<ng-container *ngFor="let column of columns; let colIndex = index" [cdkColumnDef]="column.name">
    <mat-header-cell *cdkHeaderCellDef>{{ column.label }}</mat-header-cell>
    <mat-cell *cdkCellDef="let row">{{ row[column.name] }}</mat-cell>
  </ng-container>