在Angular中按复选框筛选项目

<div>
  <label *ngFor="let project of projects">
    <input type="checkbox" [value]="project" (change)="toggleSelection($event.target.checked, project)">
    {{ project.name }}
  </label>
</div>

<div>
  <h3>筛选后的项目列表：</h3>
  <ul>
    <li *ngFor="let filteredProject of filteredProjects">{{ filteredProject.name }}</li>
  </ul>
</div>

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

@Component({
  selector: 'app-project-filter',
  templateUrl: './project-filter.component.html',
  styleUrls: ['./project-filter.component.css']
})
export class ProjectFilterComponent {
  projects = [
    { name: '项目1', category: '类别1' },
    { name: '项目2', category: '类别2' },
    { name: '项目3', category: '类别1' },
    { name: '项目4', category: '类别3' },
    { name: '项目5', category: '类别2' }
  ];

  filteredProjects = [];

  toggleSelection(checked: boolean, project: any) {
    if (checked) {
      this.filteredProjects.push(project);
    } else {
      const index = this.filteredProjects.indexOf(project);
      if (index !== -1) {
        this.filteredProjects.splice(index, 1);
      }
    }
  }
}