如何使用角度垫表通过在表中的列值上旋转来显示数据？

Question

我有一个类似于下面的数据源

[{
    "testDisplayName": "Test_Name_1",
    "data": {
       "metrics": [
          {
            "metricValue": -0.18,
            "metricKey": "metricKey_1"
          },
          {
            "metricValue": 3.9,
            "metricKey": "metricKey_2"
          },
        ]
    },
    "url": "some_url",
    "revision": "rev1",
    "dId": "dId_1",
    "release": "release_1",
    "buildId": "build_1"
},
{
    "testDisplayName": "Test_Name_1",
    "data": {
       "metrics": [
          {
            "metricValue": -0.20,
            "metricKey": "metricKey_3"
          },
          {
            "metricValue": 3.8,
            "metricKey": "metricKey_4"
          },
        ]
    "url": "url_2",
    "revision": "rev2",
    "dId": "dId_2",
    "release": "release_2",
    "buildId": "build_2"
}]

现在我想使用如下所示的 mat table 以表格格式显示上述数据。

             build_1 release_1     build_2 release_2 => these are dynamic values from the data
                             
Metric Key     Metric value          Metric Value         => Static displayColumns

metricKey_1      -0.18                   3.9
metricKey_2      -0.20                   3.8

上表数据将根据 testDisplayName 进行过滤。因此，metricKey 和 metricValue 将根据 testDisplayName 而不同。比如说现在它在 Test_Name_1 上被过滤所以来到实际问题，这在 mat-table 中可以实现吗？因为根据我对角垫表所做的研究，我不能在 displayColumn 中有相同的列名，而且我不能在同一个单元格中显示来自对象的两个值，即在我的例子中（build_1 release_1 ...）。

任何帮助或指点将不胜感激。提前致谢。

Answer 1

我知道我的回答晚了。不幸的是，我无法帮助您解决所有问题。但是……三点：

• “我不能在 displayColumn 中使用相同的列名”。 - 正确：displayColumn 数组值必须是唯一的。
• “我无法在同一个单元格中显示对象的两个值”。如果我理解正确的话，那不是真的。您可以为任何表格单元格生成任何输出。 例如。 {{element.buildId}} {{element.release}}
• 我试图找到一个免费的开源包来帮助构建 Angular 数据透视表，但有一些付费解决方案。我找到了唯一一个免费的开源软件。你可以看看它：

https://github.com/debabratapatra/angular-pivot-table/tree/master

https://stackblitz.com/edit/pivot-table?file=src%2Fapp%2Fsample-pivot-table%2Fsample-pivot-table.component.html

那个包裹并不完美：例如。没有排序选项。我打算尝试扩展它并更新它到 Angular16。

如果您已经实施了数据透视表，我将不胜感激任何建议。

谢谢！