带有 mat-table 的嵌套数组

Question

我有一个嵌套数组，我想用 mat-table 显示它。

阵列中有两个不同的模块“Flex”，有几个位置要显示在 table。

由于数组中有两个“Flex”模块，因此也应该显示两个table，如下例：

FLEX

Position	ID	Menge	Bezeichnung	BP_Gesamt
1	STZBH	2	Xpress weiss	1998,00
2	STZBG	5	Xpress schwarz	3998,00

FLEX

Position	ID	Menge	Bezeichnung	BP_Gesamt
1	STZBH	4	Xpress weiss	3996,00
2	STZBG	4	Xpress schwarz	3996,00

[
{
    "module": "Flex",
    "positionen": [
        {
            "Position": 0,
            "ID": {
                "id": "XLEW_1_2_2",
                "wert": "STZBH"
            },
            "Menge": {
                "id": "XLEW_1_2_5",
                "wert": "2"
            },
            "Bezeichnung": {
                "id": "XLEW_1_2_6",
                "wert": "Xpress weiss"
            },
            "BP_Gesamt": {
                "id": "XLEW_1_2_17",
                "wert": "1998,00"
            }
        },
        {
            "Position": 1,
            "ID": {
                "id": "XLEW_1_2_2",
                "wert": "STZBH"
            },
            "Menge": {
                "id": "XLEW_1_2_5",
                "wert": "5"
            },
            "Bezeichnung": {
                "id": "XLEW_1_2_6",
                "wert": "Xpress weiss"
            },
            "BP_Gesamt": {
                "id": "XLEW_1_2_17",
                "wert": "3998,00"
            }
        }
    ]
},
{
    "module": "Flex",
    "positionen": [
        {
            "Position": 0,
            "ID": {
                "id": "XLEW_1_2_2",
                "wert": "STZBH"
            },
            "Menge": {
                "id": "XLEW_1_2_5",
                "wert": "4"
            },
            "BP_Gesamt": {
                "id": "XLEW_1_2_17",
                "wert": "3996,00"
            }
        },
        {
            "Position": 1,
            "ID": {
                "id": "XLEW_1_2_2",
                "wert": "STZBG"
            },
            "Menge": {
                "id": "XLEW_1_2_5",
                "wert": "4"
            },
            "Bezeichnung": {
                "id": "XLEW_1_2_6",
                "wert": "Xpress schwarz"
            },
            "BP_Gesamt": {
                "id": "XLEW_1_2_17",
                "wert": "3996,00"
            }
        }
    ]
}

]

我是 Angular 和 mat-table 的新手，找不到解决我的问题的方法。

谁能帮帮我

Answer 1

您需要在您的项目中安装underscore.js，然后您才能使用此代码

<ng-container *ngFor="let td of table_data">
<h1>{{td.name}}</h1>
<table mat-table [dataSource]="td.data" class="mat-elevation-z8">
    <ng-container [matColumnDef]="column" *ngFor="let column of td.header">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="td.header"></tr>
    <tr mat-row *matRowDef="let row; columns: td.header;"></tr>
</table>

parseData(inputArray: any[]) {
    const returnArray = [];
    for (const data of inputArray) {
        const new_obj = { name: "", header: [], data: [] };
        const arr = [];
        new_obj["data"] = [];
        new_obj["name"] = data.module;
        for (const d of data.positionen) {
            const keys = Object.keys(d);
            const obj: any = {};
            for (const k of keys) {
                if (k === "Position") {
                    obj[k] = d[k];
                } else {
                    obj[k] = d[k].wert;
                }
            }
            new_obj["data"].push(obj);
            arr.push(keys);
        }
        new_obj["header"] = _.uniq(_.flatten(arr));
        returnArray.push(new_obj);
    }

    return returnArray;
}

ngOnInit(): void {
    this.table_data = this.parseData(PASS_YOUR_DATA_HERE);
}

带有 mat-table 的嵌套数组

Nested array with mat-table

angular

mat-table