groupby ngFor angular2答案

【问题标题】：groupby ngFor angular2groupby ngFor angular2
【发布时间】：2018-05-22 16:45:06
【问题描述】：

美好的一天，我一直在尝试按组标题显示数组，我从网络服务获取数组，我想按组标题显示项目

例子

组 1 第 1 项第 2 项第 3 项

组 2 第 1 项第 2 项第 3 项

这是我的数组

                [
                {
                    "id": "1",
                    "title": "Item 1",
                    "groups": [
                        {
                            "id": "2",
                            "title": "Communication"
                        }
                    ]
                },
                {
                    "id": "2",
                    "title": "Item 2",
                    "groups": [
                        {
                            "id": "2",
                            "title": "Communication"
                        }
                    ]
                },
                {
                    "id": "3",
                    "title": "Item 1",
                    "groups": [
                        {
                            "id": "1",
                            "title": "Creativie Art"
                        }
                    ]
                },
                {
                    "id": "4",
                    "title": "Item 3",
                    "groups": [
                        {
                            "id": "2",
                            "title": "Communication"
                        }
                    ]
                },
                {
                    "id": "5",
                    "title": "Item 2",
                    "groups": [
                        {
                            "id": "1",
                            "title": "Creativie Art"
                        }
                    ]
                },
                {
                    "id": "6",
                    "title": "Item 3",
                    "groups": [
                        {
                            "id": "1",
                            "title": "Creativie Art"
                        }
                    ]
                }
            ]

我无法粘贴所有数组数据，因为它太长了，但这是数组结构

【问题讨论】：

我明白 Object.assign({}, ...value['groups']);可以将组节点转换为对象，但我不知道这是否有帮助
请分享实际数组，以便我们为您提供帮助。
我已经在问题中写了实际，它与示例数组相同。没有区别
那么其他项目2和3在哪里？
我已经更新了数组，但由于它的长度不能全部粘贴，但数组结构保持不变。它目前有 2 个组

标签： angular ionic2 ngfor angular-pipe

【解决方案1】：

这是我们如何做到这一点的一种选择：

app.component.ts

const groupsDict = this.arr.reduce((acc, cur) => {
  cur.groups.forEach(({ id, title}) => {
    acc[id] = acc[id] || { id, title };
    acc[id].items = acc[id].items || [];
    acc[id].items.push({ id: cur.id, title: cur.title });
  });
  return acc;
}, {});
this.groups = Object.keys(groupsDict).map(x => groupsDict[x]);

app.component.html

<div class="grid">
  <div *ngFor="let group of groups" class="col">
    <h2>{{ group.title }}</h2>
    <div *ngFor="let item of group.items">
      {{ item.title }}
    </div>
  </div>
</div>

Stackblitz Example

【讨论】：