Angular 是否创建包含组项的表？

这是我的数据：

[{
    "id": 1,
    "name": "item 1",
    "group": "Group A"
}, {
    "id": 2,
    "name": "item 2",
    "group": "Group A"
}, {
    "id": 3,
    "name": "item 3",
    "group": "Group B"
}, {
    "id": 4,
    "name": "item 4",
    "group": "Group B"
}, {
    "id": 5,
    "name": "item 5",
    "group": "Group B"
}, {
    "id": 6,
    "name": "item 6",
    "group": "Group C"
}]

我想创建如下表：

|======================|
|ID     |NAME          |
|======================|
|Group A               |
|----------------------|
|1      |item 1        |
|2      |item 2        |
|======================|
|Group B               |
|----------------------|
|3      |item 3        |
|4      |item 4        |
|5      |item 5        |
|======================|
|Group C               |
|----------------------|
|6      |item 6        |
========================

我尝试创建变量来存储每个循环中的“组”，但没有工作和

---

在返回数据之前，我可以在服务器端分组，但我仍然希望在客户端进行分组，所以如何做到这一点？

您可以使用以下逻辑来实现结果

var groups = new Set(array.map(item => item.group)), 
    results = [];
groups.forEach(g => 
  results.push({
    name: g, 
    values: array.filter(i => i.group === g)
  }
))

HTML

<div *ngFor="let item in results">
   <table>
      <tr>
         <th>ID</th>
         <th>Name</th>
      </tr>
      <ng-container>
        <tr>
          <td colspan="2">{{item.name}}</th>
        </tr>
        <tr *ngFor="let value in item.values">
          <td>{{value.id}}</td>
          <td>{{value.name}}</td>
        </tr>
      </ng-container>
   </table>
<div>

身份证件
名称
{{item.name}
{{value.id}
{{value.name}

您可以使用和方法以group by和group name创建数组

我已经在中创建了一个演示。希望这将帮助/指导您实现您的要求

代码片段

.ts文件代码

模板

身份证件
名称
{{item.group}
{{value.id}
{{value.name}

angular中的输出是什么？我希望像上面一样创建表检查此链接\就像上面的注释所示，您可以检查大量选项。如果你想要动态的，你可以使用剑道格网进行角度调整。这给了你内置的分组功能谢谢你，还有一件事你能帮我把“groupArr”转换回平面数组吗？我可以用foreach，但我想知道你的方法。你可以再次使用

reduce

和

扩展语法来获得平面数组。像这样
groupArr.reduce（（r，{groupItem}）=>[…r，…groupItem]，]）
谢谢你，你能帮我把“groups”转换回平面数组吗？我可以用foreach做这个，然后推到新数组，但我想知道你的方法
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  array = [
    {
      "id": 1,
      "name": "item 1",
      "group": "Group A"
    },
    {
      "id": 2,
      "name": "item 2",
      "group": "Group A"
    },
    {
      "id": 3,
      "name": "item 3",
      "group": "Group B"
    },
    {
      "id": 4,
      "name": "item 4",
      "group": "Group B"
    },
    {
      "id": 5,
      "name": "item 5",
      "group": "Group B"
    },
    {
      "id": 6,
      "name": "item 6",
      "group": "Group C"
    }
  ];

    groupArr = this.array.reduce((r,{group})=>{
        if(!r.some(o=>o.group==group)){
          r.push({group,groupItem:this.array.filter(v=>v.group==group)});
    }
    return r;
    },[]);

}

   <table>
     <tr>
         <th>ID</th>
         <th>Name</th>
      </tr>
        <tbody *ngFor="let item of groupArr">
             <ng-container>
        <tr >
          <td colspan="2"><b>{{item.group}}</b></td>
        </tr>
        <tr *ngFor="let value of item.groupItem">
          <td>{{value.id}}</td>
          <td>{{value.name}}</td>
        </tr>
      </ng-container></tbody>
   </table>