Dynami c Строки и Столбцы с использованием таблицы данных материала Angular

Question

Используя базовую c таблицу, я смог визуализировать динамические c строки и столбцы

  <tbody>
    <tr *ngFor="let row of data">
      <td *ngFor="let val of row">
        {{ val }}
      </td>
    </tr>
  </tbody>
</table>

Так что те же логики c, когда я попробовал это с angular mat-table Я получаю эту ошибку

ERROR Error: Duplicate column definition name provided: "undefined"

<mat-table #table [dataSource]="data">
  <ng-container [matColumnDef]="col" *ngFor="let row of data">
    <mat-header-cell *matHeaderCellDef> {{ row }} </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{ element[col] }} </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="data"></mat-header-row>
  <mat-row *matRowDef="let row; columns: data"></mat-row>
</mat-table>

Пожалуйста, помогите.

ОБНОВЛЕНИЕ

Я хотел отобразить Данные Excel в mat-table.

Я могу отобразить их, используя простую таблицу.

Пожалуйста, посмотрите на приведенный ниже стек * бликов

https://stackblitz.com/edit/angular-excel-read-table

Answer 1

Следующий шаблон должен работать.

<table mat-table [dataSource]="data">
  <ng-container *ngFor="let columnName of columnNames" [matColumnDef]="columnName">
    <th mat-header-cell *matHeaderCellDef>{{ columnName }}</th>
    <td mat-cell *matCellDef="let row">{{ row[columnName] }}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columnNames"></tr>
  <tr mat-row *matRowDef="let row; columns: columnNames"></tr>
</table>

Предполагается, что в вашем классе компонентов определен массив columnNames. Он должен содержать имена свойств ваших объектов строк, которые будут включены в вашу таблицу.

Пожалуйста, посмотрите на это StackBlitz