如何迭代一个对象在Angular中打印这种类型的UI？

Question

我有这个对象。现在我想使用 *ngFor 迭代它以获得 UI （图像 link 在下面给出）。我在制作不同的部分时遇到问题。

这是我的对象 -

[
{
    "number": 1,
    "section": "Section 1"
},
{
    "number": 2,
    "section": "Section 1",
},
{
    "number": 3,
    "section": "Section 1"
},
{
    "number": 1,
    
    "section": "Section 2"
},
{
    "number": 2,
    "section": "Section 2"
},
{
    "number": 1,
    "section": "Section 3"
},
{
    "number": 1,
    "section": "Section 4"
},
{
    "number": 2,
    "section": "Section 4"
}
]

This is the screen which I want to develop

请帮忙。提前致谢！

Answer 1

您可以使用 JavaScript 的 array.reduce() 以您想要的格式重组数组。

var data = [
{
    "number": 1,
    "section": "Section 1"
},
{
    "number": 2,
    "section": "Section 1",
},
{
    "number": 3,
    "section": "Section 1"
},
{
    "number": 1,
    
    "section": "Section 2"
},
{
    "number": 2,
    "section": "Section 2"
},
{
    "number": 1,
    "section": "Section 3"
},
{
    "number": 1,
    "section": "Section 4"
},
{
    "number": 2,
    "section": "Section 4"
}
]

let group = data.reduce((x, y) => {
 x[y.section] = [...x[y.section] || [], y];
 return x;
}, {});

console.log(group)

Reference

如何迭代一个对象在Angular中打印这种类型的UI？

How to iterate an object to print this type of UI in Angular?

html

angular

typescript

ionic4