Angular7/显示数组中按特定字段分组的字段集列表

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'groupBy'
})
export class GroupByPipe implements PipeTransform {
  transform(value: any[], field: string): any[] {
    const groupedData = {};

    // 分组数据
    value.forEach(item => {
      const key = item[field];
      if (groupedData[key]) {
        groupedData[key].push(item);
      } else {
        groupedData[key] = [item];
      }
    });

    // 转换为数组
    return Object.keys(groupedData).map(key => ({
      [field]: key,
      items: groupedData[key]
    }));
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div *ngFor="let group of data | groupBy:'fieldName'">
      <h2>{{ group.fieldName }}</h2>
      <ul>
        <li *ngFor="let item of group.items">{{ item.name }}</li>
      </ul>
    </div>
  `
})
export class MyComponent {
  data = [
    { name: 'Item 1', fieldName: 'Group 1' },
    { name: 'Item 2', fieldName: 'Group 1' },
    { name: 'Item 3', fieldName: 'Group 2' },
    { name: 'Item 4', fieldName: 'Group 2' },
    { name: 'Item 5', fieldName: 'Group 3' }
  ];
}