Angular数据筛选表格实现：点击颜色选项筛选对应数据的方法及npm包推荐

我来帮你梳理下在Angular里实现颜色筛选表格的具体步骤，还有好用的工具包推荐～

一、手动实现（无需第三方包） #

如果不想依赖第三方库，自己实现其实也很简单，核心思路就是维护一个选中颜色的状态，根据这个状态过滤表格数据。

步骤1：定义数据结构与组件状态 #

在你的组件类里，先准备好原始数据，以及用来存储选中颜色和过滤后数据的变量：

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

interface Product {
  id: number;
  name: string;
  color: string;
  price: number;
}

@Component({
  selector: 'app-color-filter-table',
  templateUrl: './color-filter-table.component.html',
  styleUrls: ['./color-filter-table.component.css']
})
export class ColorFilterTableComponent {
  // 原始产品数据
  originalProducts: Product[] = [
    { id: 1, name: 'T恤', color: '红色', price: 99 },
    { id: 2, name: '裤子', color: '蓝色', price: 199 },
    { id: 3, name: '帽子', color: '红色', price: 59 },
    { id: 4, name: '鞋子', color: '黑色', price: 299 },
    { id: 5, name: '袜子', color: '蓝色', price: 29 }
  ];
  // 可选颜色列表（可以从原始数据中提取去重）
  availableColors: string[] = ['红色', '蓝色', '黑色', '全部'];
  // 当前选中的颜色
  selectedColor: string = '全部';
  // 过滤后的数据
  filteredProducts: Product[] = [...this.originalProducts];

  // 切换选中颜色并过滤数据
  setSelectedColor(color: string): void {
    this.selectedColor = color;
    if (color === '全部') {
      this.filteredProducts = [...this.originalProducts];
    } else {
      this.filteredProducts = this.originalProducts.filter(product => product.color === color);
    }
  }
}

步骤2：编写模板代码 #

在HTML模板里，先做颜色选项的按钮组，再渲染过滤后的表格：

<!-- 颜色筛选按钮组 -->
<div class="color-filter-buttons">
  <button 
    *ngFor="let color of availableColors"
    [class.active]="selectedColor === color"
    (click)="setSelectedColor(color)"
  >
    {{ color }}
  </button>
</div>

<!-- 数据表格 -->
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
      <th>颜色</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let product of filteredProducts">
      <td>{{ product.id }}</td>
      <td>{{ product.name }}</td>
      <td>{{ product.color }}</td>
      <td>{{ product.price }}元</td>
    </tr>
  </tbody>
</table>

进阶：用自定义管道实现过滤 #

如果觉得组件里的过滤逻辑太冗余，可以封装成自定义管道，这样模板里更简洁：

import { Pipe, PipeTransform } from '@angular/core';
import { Product } from './color-filter-table.component';

@Pipe({
  name: 'colorFilter'
})
export class ColorFilterPipe implements PipeTransform {
  transform(products: Product[], selectedColor: string): Product[] {
    if (!products || selectedColor === '全部') return products;
    return products.filter(product => product.color === selectedColor);
  }
}

然后模板里就可以直接用管道过滤：

<tr *ngFor="let product of originalProducts | colorFilter: selectedColor">
  <!-- 表格内容 -->
</tr>

⚠️ 注意：自定义管道默认是纯管道，只有当输入的引用发生变化时才会触发。如果你的原始数据是动态加载的，可能需要把管道设置为非纯管道（pure: false），但要注意性能影响。

二、推荐的Angular表格npm包 #

如果需要更复杂的表格功能（比如排序、分页、批量操作），直接用成熟的第三方包会更高效，推荐这几个：

1. Angular Material MatTable #

这是Angular官方的UI组件库，功能全面且稳定，自带的MatTableDataSource可以轻松实现自定义筛选：

• 优势：和Angular生态完美兼容，文档完善，支持主题定制
• 核心用法：通过dataSource.filterPredicate自定义颜色筛选逻辑，配合MatButtonToggleGroup做颜色选择器，代码更规范

2. Ngx-datatable #

轻量级的表格组件，体积小、性能好，配置灵活：

• 优势：支持虚拟滚动（大数据量场景友好），自定义筛选模板简单，学习成本低
• 核心用法：通过[filterPredicate]传入自定义过滤函数，快速实现颜色筛选

3. PrimeNG DataTable #

功能非常丰富的UI组件库，自带多种筛选组件：

• 优势：内置了下拉筛选、输入筛选等多种方式，颜色筛选可以直接用它的模板快速搭建，还支持导出、编辑等高级功能
• 核心用法：利用p-column的filter属性，结合p-dropdown做颜色选项筛选，几乎不用写太多逻辑代码

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