创建具有特定数据源类型的材料表

Question

我甚至不知道从哪里开始，材料文档也无法为我指出正确的方向。我想知道是否有可能使用如下所示的数据源创建mat-table:

[
{columnName: "First Name", rowsList: ["John","James","Mark"]},
{columnName: "Last Name", rowsList: ["Jones","Anderson", "Jacobs"]}
]

理想情况下是这样的

tbody> <<tr>詹姆斯

姓
约翰道明>
	安德森
标记	雅各布斯

这个实现的关键是数据的转换

const DATA: { columnName: string; rowsList: string[] }[] = [
{ columnName: "First Name", rowsList: ["John", "James", "Mark"] },
{ columnName: "Last Name", rowsList: ["Jones", "Anderson", "Jacobs"] }
];
columns: string[] = DATA.map(x => x.columnName);
data: { [key: string]: string }[] = [];
DATA[0].rowsList.forEach((x, i) => {
const element: { [key: string]: string } = {};
DATA.forEach(x => {
element[x.columnName] = x.rowsList[i];
});
this.data.push(element);
});

在此之后，mat-table很容易

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

Stackblitz