对象数组到 Angular 中的网格/表格

Question

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

[{
    "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

如何进行？

Answer 1

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

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

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

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

并将标题分开。