当没有输入以进行角度过滤时如何显示所有卡片？答案

【问题标题】：How to display all cards when no input is given to filter in angular?当没有输入以进行角度过滤时如何显示所有卡片？
【发布时间】：2026-01-09 18:05:02
【问题描述】：

我正在尝试使用 Pipe 以角度过滤多张卡片，过滤器运行良好，但是当没有给出输入值时，它不会显示任何卡片。我想在没有输入或输入或选择“全部”时显示所有卡片。

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 [];
      return array.filter(item => item[filterField] == filterValue);
  }
}

user.component.html

<hr class="line">
<input #myInput type="text" placeholder="Filter" >
<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 cards | filterBy: 'title': myInput.value ">
      <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>

建议是否有更简单的方法来过滤所选值的卡片。

【问题讨论】：

标签： html angular typescript select filter

【解决方案1】：

如果没有设置过滤器，则更改过滤器以返回所有列表，如下所示：

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 (!filterField || !filterValue) {
         return array;
      }
      if (!array) return [];
      return array.filter(item => item[filterField] == filterValue);
  }
}

【讨论】：