如何使用Angular查询和显示子集合？

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

@Component({
  selector: 'app-subset',
  templateUrl: './subset.component.html',
  styleUrls: ['./subset.component.css']
})
export class SubsetComponent {
  parentCollection: any[]; // 父集合
  filteredSubset: any[]; // 过滤后的子集合

  constructor() {
    // 从后端API获取父集合数据
    this.parentCollection = [
      { name: 'Item 1', category: 'Category A' },
      { name: 'Item 2', category: 'Category B' },
      { name: 'Item 3', category: 'Category A' },
      { name: 'Item 4', category: 'Category C' },
    ];
  }

  filterSubset(category: string) {
    // 使用过滤器管道过滤子集合
    this.filteredSubset = this.parentCollection.filter(item => item.category === category);
  }
}

<div>
  <button (click)="filterSubset('Category A')">Filter Category A</button>
  <button (click)="filterSubset('Category B')">Filter Category B</button>
  <button (click)="filterSubset('Category C')">Filter Category C</button>
</div>

<div *ngFor="let item of filteredSubset">
  {{ item.name }}
</div>