Angular项目多复选框课程分类过滤功能实现求助

组件 TS 文件修改 #

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  courses = [
    { name: 'Angular入门', category: '前端框架' },
    { name: 'React实战', category: '前端框架' },
    { name: 'Node.js后端开发', category: '后端技术' },
    { name: 'MySQL数据库', category: '数据库' },
    { name: 'Vue3进阶', category: '前端框架' },
    { name: 'MongoDB实战', category: '数据库' }
  ];
  selectedCategories: string[] = []; // 维护选中的分类数组

  // 切换分类选中状态
  toggleCategory(category: string) {
    const index = this.selectedCategories.indexOf(category);
    if (index > -1) {
      this.selectedCategories.splice(index, 1);
    } else {
      this.selectedCategories.push(category);
    }
  }

  // 重置所有选中状态
  resetFilters() {
    this.selectedCategories = [];
  }
}

过滤 Pipe 文件修改 #

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

@Pipe({
  name: 'categoryFilter'
})
export class CategoryFilterPipe implements PipeTransform {
  transform(courses: any[], selectedCategories: string[]): any[] {
    // 未选中任何分类时返回全部课程
    if (!selectedCategories || selectedCategories.length === 0) {
      return courses;
    }
    // 筛选出分类在选中列表中的课程
    return courses.filter(course => selectedCategories.includes(course.category));
  }
}

HTML 模板修改 #

<div class="filter-container">
  <h3>课程分类筛选</h3>
  <!-- 分类复选框组 -->
  <div class="checkbox-group">
    <label>
      <input 
        type="checkbox" 
        value="前端框架"
        (change)="toggleCategory('前端框架')"
        [checked]="selectedCategories.includes('前端框架')"
      >
      前端框架
    </label>
    <label>
      <input 
        type="checkbox" 
        value="后端技术"
        (change)="toggleCategory('后端技术')"
        [checked]="selectedCategories.includes('后端技术')"
      >
      后端技术
    </label>
    <label>
      <input 
        type="checkbox" 
        value="数据库"
        (change)="toggleCategory('数据库')"
        [checked]="selectedCategories.includes('数据库')"
      >
      数据库
    </label>
  </div>

  <button (click)="resetFilters()">重置筛选</button>

  <!-- 课程列表 -->
  <h4>课程列表</h4>
  <ul>
    <li *ngFor="let course of courses | categoryFilter: selectedCategories">
      {{ course.name }} ({{ course.category }})
    </li>
  </ul>
</div>

核心逻辑说明 #

• 用selectedCategories数组存储所有选中的分类，点击复选框时通过toggleCategory方法添加/移除对应分类
• 过滤Pipe中判断课程分类是否存在于选中数组中，为空时返回全部课程
• 复选框的选中状态通过[checked]绑定到数组的包含判断结果，确保状态实时同步

内容的提问来源于stack exchange，提问作者ray2233