virtualScroll with Custom Pipe Search

this is my virtual scroll

 <ion-list [virtualScroll]=" data | productFilterByName : productFilter  ">
      <ion-item-sliding *virtualItem="let article">
      <ion-item >
          <ion-col class="center" (click)="goToProductPage($event, article)">
          <ion-col class="center" (click)="goToProductPage($event, article)">
          <ion-col class="center" (click)="goToProductPage($event, article)">
            {{article.price | currency:'TND':true:'1.3-3' }}
      <ion-item-options side="right">
      <button ion-button color="secondary" (click)="showMeProductDetails($event,article)">Details</button>

i had a search bar at the same page:

  <ion-toolbar  no-border-top>
    <ion-searchbar  color="primary"

this is the custom Pipe

import { PipeTransform,Pipe } from '@angular/core';
import { IProduct } from './page1';
export class ProductFilterPipe implements PipeTransform {
    transform (value :IProduct[], filterBy: string):IProduct[]
         filterBy = filterBy? filterBy.toLocaleUpperCase():null;
         return  filterBy ? value.filter((product: IProduct)=>
  !== -1): value;

when i do the search. it will show me the result perfectly. but if i delete the caracters in the search. the list contain only 4 items.

this is how the virtual scroll show up :


this is how the list appear when i do search:


if i remove what the search bar contains to go back to the first step. this is how virtual scroll behave


How I can resolve this problem.
thank you in advance

There are currently several issues open on github, relating VirtualScroll. Iā€™m struggling with those issues myself.

1 Like