this is my virtual scroll
<ion-list [virtualScroll]=" data | productFilterByName : productFilter ">
<ion-item-sliding *virtualItem="let article">
<ion-item >
<ion-row>
<ion-col class="center" (click)="goToProductPage($event, article)">
{{article.name}}
</ion-col>
<ion-col class="center" (click)="goToProductPage($event, article)">
{{article.feature}}
</ion-col>
<ion-col class="center" (click)="goToProductPage($event, article)">
{{article.price | currency:'TND':true:'1.3-3' }}
</ion-col>
</ion-row>
</ion-item>
<ion-item-options side="right">
<button ion-button color="secondary" (click)="showMeProductDetails($event,article)">Details</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
i had a search bar at the same page:
<ion-toolbar no-border-top>
<ion-searchbar color="primary"
[(ngModel)]="productFilter"
placeholder="Search">
</ion-searchbar>
</ion-toolbar>
this is the custom Pipe
import { PipeTransform,Pipe } from '@angular/core';
import { IProduct } from './page1';
@Pipe({
name:'productFilterByName'
})
export class ProductFilterPipe implements PipeTransform {
transform (value :IProduct[], filterBy: string):IProduct[]
{
filterBy = filterBy? filterBy.toLocaleUpperCase():null;
return filterBy ? value.filter((product: IProduct)=>
product.name.toLocaleUpperCase().indexOf(filterBy)!== -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