Angular 2中使用单管道结合值数组实现对象数组多列过滤

我来给你分享一个亲测有效的实现思路——通过自定义一个管道，就能搞定多字段的字符串过滤需求，不用写一堆重复逻辑。

1. 先创建自定义过滤管道 #

我们写一个MultiFilterPipe，它能接收多组过滤条件，然后对数组进行精准筛选：

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

@Pipe({
  name: 'multiFilter'
})
export class MultiFilterPipe implements PipeTransform {
  transform(items: any[], filters: { [key: string]: string }): any[] {
    // 边界处理：没有数据或过滤条件时直接返回原数组
    if (!items || !filters) {
      return items;
    }

    // 筛选出匹配所有过滤条件的项
    return items.filter(item => {
      return Object.keys(filters).every(filterKey => {
        // 如果当前字段的过滤值为空，直接视为匹配
        if (!filters[filterKey]) return true;
        
        // 统一转小写，实现不区分大小写的模糊匹配
        const itemValue = item[filterKey] ? item[filterKey].toLowerCase() : '';
        const filterValue = filters[filterKey].toLowerCase();
        
        // 判断字段值是否包含过滤关键词
        return itemValue.includes(filterValue);
      });
    });
  }
}

2. 在模块中注册管道 #

别忘了把这个管道加到你的Angular模块的declarations里，不然模板里用不了：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MultiFilterPipe } from './multi-filter.pipe';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    MultiFilterPipe // 注册自定义管道
  ],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在组件模板中使用管道 #

假设你的组件里已经定义了目标数组和过滤条件：

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 你的目标车辆数组
  cars = [
    { "name": "FULLY MAINTAINED MARUTI SUZUKI SWIFT VDI 2008", "model": "Swift" },
    { "name": "maruti suzuki test", "model": "Swift Desire" },
    { "name": "maruti suzuki test2", "model": "Alto" },
    { "name": "maruti suzuki swift desire for sale1", "model": "Zen" },
    { "name": "maruti suzuki test", "model": "Alto" },
    { "name": "maruti suzuki test", "model": "Zen" }
  ];
  
  // 定义多字段过滤条件，空值代表忽略该字段过滤
  filterConditions = {
    name: '',
    model: ''
  };
}

然后在模板里用管道过滤，还能加输入框动态调整过滤条件：

<!-- app.component.html -->
<!-- 动态过滤输入框 -->
<input type="text" [(ngModel)]="filterConditions.name" placeholder="按名称过滤">
<input type="text" [(ngModel)]="filterConditions.model" placeholder="按型号过滤">

<!-- 渲染过滤后的结果 -->
<div *ngFor="let car of cars | multiFilter: filterConditions" class="car-item">
  <h4>{{ car.name }}</h4>
  <p>型号：{{ car.model }}</p>
  <hr>
</div>

额外说明 #

• 这个管道支持任意多字段的组合过滤，你可以在filterConditions里添加更多字段（比如年份、价格之类的）
• 自带不区分大小写的模糊匹配，用户输入大写小写都能命中结果
• 如果某个过滤字段为空，会自动跳过该字段的筛选逻辑，非常灵活
• 要是你处理的是超大规模数组，建议结合ChangeDetectionStrategy.OnPush或者给输入框加防抖，避免频繁触发过滤影响性能

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