有角度的垫子表，将列表中的每个元素变换为一行

Question

我是Angular/Javascript的新手，目前使用AngularJS来表示具有以下数据/代码的表

<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="columnA">
<th mat-header-cell *matHeaderCellDef mat-sort-header>A</th>
<td mat-cell *matCellDef="let element"> {{element.columnA}} </td>
</ng-container>
<ng-container matColumnDef="columnB">
<th mat-header-cell *matHeaderCellDef mat-sort-header>B</th>
<td mat-cell *matCellDef="let element"> {{element.columnB}} </td>
</ng-container>
<ng-container matColumnDef="columnC">
<th mat-header-cell *matHeaderCellDef mat-sort-header>C</th>
<td mat-cell *matCellDef="let element">{{element.columnC}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

对于js，

displayedColumns = ['columnA', 'columnB', 'columnC'];
export interface exampleColumns{
columnA: string[];
columnB: number[];
columnC: string;
}
const EXAMPLE_DATA: exampleColumns[] = [
{
columnA: ['A', 'B', 'C'],
columnB: [1, 2, 3],
columnC: 'apple'
},
{
columnA: ['D', 'E'],
columnB: [4, 5],
columnC: 'banana'
},
{
columnA: ['F'],
columnB: [6],
columnC: 'orange'
}
]
dataSource = EXAMPLE_DATA

这将呈现下表。

| A | B | C |
|---|---|---|
| ['A', 'B', 'C'] | [1, 2, 3]  | 'apple'  |
| ['D', 'E'] | [4, 5]  | 'banana'  |
| ['F']  | [6]  |  'orange' |

但我想要的是将列表中的每个元素转换为一行(在pandas.Dataframe.explode中有一个类似的概念，多列爆炸情况(，如下

| A | B | C |
|---|---|---|
| 'A'  | 1  | 'apple'  |
| 'B'  | 2  | 'apple'  |
| 'C'  | 3  | 'apple'  |
| 'D'  | 4  | 'banana'  |
| 'E'  | 5  | 'banana'  |
| 'F'  | 6  | 'orange'  |

我最初的想法是在ng-container中使用*ngFor来迭代列A或列B，结果发现它们不起作用。

如果有人有更好的主意，我将不胜感激：(

Answer 1

我创建了一个函数，它将分解的所有列

function covertToRows(obj) {
const array = [];
const maxArraySize = Math.max(...Object.values(obj).filter((val) => Array.isArray(val)).map(arr => arr.length));
for (let i = 0; i < maxArraySize; i++) {
const columnA = Array.isArray(obj.columnA) ? obj.columnA[i] ?? '' : obj.columnA;
const columnB = Array.isArray(obj.columnB) ? obj.columnB[i] ?? '' : obj.columnB;
const columnC = Array.isArray(obj.columnC) ? obj.columnC[i] ?? '' : obj.columnC;
array.push({
columnA,
columnB,
columnC
});
}
return array;
}

也许您希望数字类型列使用NaN，您可以将''替换为NaN。

您可以签出d3库，它用于数据可视化，也许它可以用于数据操作。