Question

这是我的数据：

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

我尝试创建变量来存储＆＃34; group＆＃34;在每个循环但不工作和我可以在返回数据之前在服务器端进行分组，我仍然希望在客户端进行，所以该怎么做？

Answer 1

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

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

<强> HTML

<div *ngFor="let item in array">
   <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>

Working Stackblitz

Answer 2

您可以使用reduce()和filter方法以组名的形式创建阵列。

我已在 stackblitz 中创建了一个演示版。希望这有助于/指导您实现您的要求。

CODE SNIPPET

.ts文件代码

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>

Angular * ngFor使用组项创建表？

2 个答案: