angular 8，循环遍历分组数据

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

@Component({
  selector: 'app-grouping-example',
  template: `
    <div *ngFor="let group of groupedData">
      <h2>{{ group.category }}</h2>
      <ul>
        <li *ngFor="let item of group.items">{{ item.name }}</li>
      </ul>
    </div>
  `,
})
export class GroupingExampleComponent {
  data = [
    { name: 'Item 1', category: 'Category A' },
    { name: 'Item 2', category: 'Category A' },
    { name: 'Item 3', category: 'Category B' },
    { name: 'Item 4', category: 'Category B' },
  ];

  groupedData = this.groupByCategory(this.data);

  groupByCategory(data: any[]): any[] {
    return data.reduce((result, item) => {
      const category = item.category;
      const group = result.find(g => g.category === category);
      if (group) {
        group.items.push(item);
      } else {
        result.push({ category, items: [item] });
      }
      return result;
    }, []);
  }
}

<div *ngFor="let group of groupedData">
  <h2>{{ group.category }}</h2>
  <ul>
    <li *ngFor="let item of group.items">{{ item.name }}</li>
  </ul>
</div>