用primeng写一个页面从listServicelist获得如下格式的数据 serviceId1categoryId1categoryserviceCategoryId1namesdfnameEnorderBy0descriptionShortp3pdescriptionShortEnp3pacceptInputTypeImeinamecnameEnuserPrice2300estimatedT

<p-panel *ngFor="let category of categories" [header]="category.name">
  <div class="service-container">
    <button *ngFor="let service of category.services" pButton type="button" label="{{service.name}}" class="service-button"></button>
  </div>
</p-panel>

import { Component, OnInit } from '@angular/core';
import { ListService } from './list.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  categories: any[] = [];

  constructor(private listService: ListService) { }

  ngOnInit(): void {
    this.listService.list().subscribe((services: any[]) => {
      this.categories = this.groupServicesByCategory(services);
    });
  }

  groupServicesByCategory(services: any[]): any[] {
    const categories = [];
    services.forEach(service => {
      const categoryIndex = categories.findIndex(c => c.category.serviceCategoryId === service.category.serviceCategoryId);
      if (categoryIndex === -1) {
        categories.push({
          category: service.category,
          services: [service]
        });
      } else {
        categories[categoryIndex].services.push(service);
      }
    });
    return categories;
  }
}

.service-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.service-button {
  margin: 10px;
  width: 150px;
}
``