Angular无过滤输入时显示全部卡片及优化过滤方案咨询

首先，你的自定义filterBy管道当前的逻辑是只要传入过滤值就严格匹配对应字段，但当输入框为空时，filterValue是空字符串，这时候数组会被过滤成空数组（因为没有卡片的title等于空字符串），所以看不到任何卡片。我们需要修改管道逻辑，让它在过滤值为空或者**过滤值为'all'**时直接返回原数组，其他情况再执行过滤。

修改后的filter.pipe.ts代码 #

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

@Pipe({ name: "filterBy" })
@Injectable()
export class FilterByPipe implements PipeTransform {
  transform(array: Array<any>, filterField: string, filterValue: string): Array<any> {
    // 如果数组不存在，返回空数组做兜底
    if (!array) return [];
    
    // 当过滤值为空、或者是'all'时，直接返回原数组的副本（避免修改原数据）
    if (!filterValue || filterValue.toLowerCase() === 'all') {
      return [...array];
    }
    
    // 其他情况执行严格匹配过滤，若需要模糊匹配可改为includes
    return array.filter(item => item[filterField] === filterValue);
  }
}

修改后，当输入框为空、或者你选择了'all'选项时，所有卡片都会正常显示。

更简便的过滤方法推荐 #

其实自定义管道虽然直观，但Angular官方更推荐在组件类中处理过滤逻辑——尤其是当过滤逻辑需要扩展（比如模糊匹配、多字段过滤）或者需要性能优化时，组件内的逻辑会更灵活可控。这里给你两种更简便的方案：

方案1：组件内维护过滤后的数组 #

在组件类中监听输入/选择框的变化，直接计算出过滤后的卡片数组，模板只负责渲染这个结果数组：

组件类（user.component.ts）

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  // 原始卡片数据
  cards: any[] = [];
  // 过滤后的卡片数组
  filteredCards: any[] = [];

  ngOnInit(): void {
    // 初始化你的原始卡片数据
    this.cards = [/* 这里填入你的卡片数据 */];
    // 初始状态显示全部卡片
    this.filteredCards = [...this.cards];
  }

  // 处理过滤逻辑的方法
  handleFilter(filterValue: string): void {
    if (!filterValue || filterValue.toLowerCase() === 'all') {
      this.filteredCards = [...this.cards];
    } else {
      // 严格匹配，如需模糊匹配可改为includes并忽略大小写
      this.filteredCards = this.cards.filter(card => 
        card.title.toLowerCase().includes(filterValue.toLowerCase())
      );
    }
  }
}

模板（user.component.html）

<hr class="line">
<input type="text" placeholder="Filter" (input)="handleFilter($event.target.value)">
<!-- 可选：添加下拉选择框支持'all'选项 -->
<select class="ml-2" (change)="handleFilter($event.target.value)">
  <option value="all">All Movies</option>
  <!-- 动态生成电影标题选项（可去重优化） -->
  <option *ngFor="let card of cards" [value]="card.title">{{card.title}}</option>
</select>
<div style="text-align: center;">
  <h3>MOVIES</h3>
</div>
<hr class="line">
<div class="container" >
  <div class="row">
    <div class="col-md-3 mx-auto my-5" *ngFor="let card of filteredCards">
      <mdb-card>
        <mdb-card-img [src]="card.img" alt="Card image cap"></mdb-card-img>
        <mdb-card-body>
          <mdb-card-title>
            <h4>{{card.title}}</h4>
          </mdb-card-title>
          <mdb-card-text>
            {{card.description}}
          </mdb-card-text>
          <button mdbBtn color="primary">{{card.buttonText}}</button>
        </mdb-card-body>
      </mdb-card>
    </div>
  </div>
</div>

这种方法的好处是逻辑集中、容易调试，还能轻松扩展模糊匹配、多字段过滤等复杂需求。

方案2：使用现成的第三方管道库 #

如果不想自己写过滤逻辑，可以用ngx-pipes这类成熟的Angular管道库，它内置了丰富的过滤、排序管道，比如filter管道支持多条件过滤、模糊匹配等，省去自定义管道的工作量。不过如果你的需求比较简单，方案1已经足够轻便。

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