Angular 中网格/表格的对象数组答案

【问题标题】：Array of objects to grid/table in AngularAngular 中网格/表格的对象数组
【发布时间】：2023-02-01 01:17:45
【问题描述】：

我将数据作为对象数组，如下所示：

[{
    "x":1,
    "y":10,
    "val": 13
},
{
    "x":1,
    "y":20,
    "val": 15
},
{
    "x":2,
    "y":10,
    "val": 12
},
{
    "x":2,
    "y":20,
    "val": 16
}
]

我希望这些数据显示在这样的 HTML 表格中：

        1    2

10   |  13   12
20   |  15   16

如何进行？

【问题讨论】：

我想你想看看 display:grid 和 grid-area 属性
我认为我的问题与 CSS 样式无关。我想我需要一种方法在 HTML 代码中显示这些数据，其中包含一些包含 ngFor 的标签。

标签： json angular html-table grid

【解决方案1】：

我会解析数据，这样你就有了一个二维数组。是这样的：

[
  [13,12],
  [15,16],
]

然后使用两个嵌套的 ng-for 循环来呈现内容：

<div *ngFor="let row of matrix">
    <span *ngFor="let item of row">{{item}}</span>
</div>

并将标题分开。

【讨论】：