Ionic 5中如何为virtualScroll配置ng2-search-filter搜索过滤管道

1. 首先确认你已经在对应页面的模块文件中导入了Ng2SearchPipeModule，否则管道不会生效

import { Ng2SearchPipeModule } from 'ng2-search-filter';

@NgModule({
  imports: [
    // 其余原有导入（如IonicModule、CommonModule等）保留
    Ng2SearchPipeModule
  ]
})
export class 你的页面模块名 {}

2. 你需要把过滤管道直接作用在ion-virtual-scroll的items属性绑定的源数组上，这就是你要找的管道插入位置，不需要修改*virtualItem相关的逻辑

• 如果希望对所有字段做模糊匹配，直接这样修改即可：

<ion-virtual-scroll
  [items]="listedLoadedPlaces | filter: searchPlace"
  approxItemHeight="70px"
>
  <ion-item
    [routerLink]="['/', 'places', 'tabs', 'discover', place.id]"
    detail
    *virtualItem="let place"
  >
    <ion-thumbnail slot="start">
      <ion-img [src]="place.imageUrl"></ion-img>
    </ion-thumbnail>
    <ion-label>
      <h2>{{ place.title }}</h2>
      <p>{{ place.description }}</p>
    </ion-label>
  </ion-item>
</ion-virtual-scroll>

• 如果希望只限定搜索title和description两个字段，避免匹配到id、图片地址等无关内容，可以把管道写法改成：
  [items]="listedLoadedPlaces | filter: {title: searchPlace, description: searchPlace}"

注意事项 #

• ng2-search-filter默认搜索不区分大小写，无需额外配置
• 如果你的列表数据量特别大，建议把过滤逻辑放到ts文件中实现：监听searchPlace的变化，手动生成过滤后的数组再绑定给virtual scroll，性能会比管道过滤更好

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