Angular2中基于Category与Category Type选择框的表格过滤问题

嘿，既然你已经搞定了基础的下拉选择组件和Pipe过滤函数，那咱们把剩下的部分补全，轻松实现双字段联动过滤表格的功能！

第一步：补全Category Type的下拉选择HTML #

先把你没写完的Category Type选择框补上，和Category保持一致的结构：

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 no-padding">
  <label style="font-size: 20px;color: #55595c;font-family: 'Roboto', sans-serif">Category</label>
  <ng-select 
    [options]="categoryOptions" 
    [(ngModel)]="filter.selectedCategory" 
    name="category" 
    class='filterDropDown' 
    placeholder="All" 
    [allowClear]="true" 
    notFoundMsg="No Category Found">
  </ng-select>
</div>

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 no-padding">
  <label style="font-size: 20px;color: #55595c;font-family: 'Roboto', sans-serif">Category Type</label>
  <ng-select 
    [options]="categoryTypeOptions" 
    [(ngModel)]="filter.selectedCategoryType" 
    name="categoryType" 
    class='filterDropDown' 
    placeholder="All" 
    [allowClear]="true" 
    notFoundMsg="No Category Type Found">
  </ng-select>
</div>

我把变量名调整得更清晰，比如把category改成categoryOptions，绑定的ngModel放在统一的filter对象里，方便后续传递过滤参数。

第二步：在表格中应用双参数过滤Pipe #

接下来是表格部分，咱们要把自定义Pipe用在*ngFor里，同时传入两个过滤条件：

<table class="table table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Category</th>
      <th>Category Type</th>
      <!-- 其他表头字段 -->
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of dataList | categoryFilter: filter.selectedCategory: filter.selectedCategoryType">
      <td>{{item.name}}</td>
      <td>{{item.category}}</td>
      <td>{{item.categoryType}}</td>
      <!-- 其他表格内容 -->
    </tr>
  </tbody>
</table>

这里的categoryFilter就是你已经写好的Pipe名称，后面跟着两个参数：选中的分类和分类类型，Pipe会根据这两个值实时过滤表格数据。

第三步：调整Pipe以支持双参数过滤 #

如果你的Pipe之前只支持单个参数，那咱们调整一下让它兼容双条件过滤：

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

@Pipe({
  name: 'categoryFilter'
})
export class CategoryFilterPipe implements PipeTransform {
  transform(items: any[], selectedCategory?: string, selectedCategoryType?: string): any[] {
    if (!items) return [];
    
    // 如果两个条件都为空，直接返回全部数据
    if (!selectedCategory && !selectedCategoryType) return items;

    return items.filter(item => {
      // 处理分类过滤：没选择分类则跳过该条件，选择了则匹配对应值
      const matchesCategory = !selectedCategory || item.category === selectedCategory;
      // 处理分类类型过滤：逻辑和分类一致
      const matchesCategoryType = !selectedCategoryType || item.categoryType === selectedCategoryType;
      // 只有同时满足两个条件的条目才会被保留
      return matchesCategory && matchesCategoryType;
    });
  }
}

第四步：组件类中的基础配置 #

最后在你的组件类里定义必要的变量，让整个流程跑起来：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 模拟的表格数据源
  dataList = [
    { name: 'Smartphone', category: 'Electronics', categoryType: 'Mobile' },
    { name: 'Mechanical Keyboard', category: 'Electronics', categoryType: 'Accessory' },
    { name: 'Cotton T-Shirt', category: 'Fashion', categoryType: 'Clothing' },
    // 更多测试数据...
  ];

  // 分类选项列表
  categoryOptions = [
    { label: 'Electronics', value: 'Electronics' },
    { label: 'Fashion', value: 'Fashion' },
    // 更多分类选项...
  ];

  // 分类类型选项列表
  categoryTypeOptions = [
    { label: 'Mobile', value: 'Mobile' },
    { label: 'Accessory', value: 'Accessory' },
    { label: 'Clothing', value: 'Clothing' },
    // 更多类型选项...
  ];

  // 存储过滤条件的对象
  filter = {
    selectedCategory: null,
    selectedCategoryType: null
  };
}

这样整套流程就通了：当你选择Category或者Category Type的时候，ngModel会自动更新filter对象里的值，Pipe会实时接收新的参数并重新过滤表格数据，实现无缝的联动过滤效果~

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