virtualScroll and empty list problem

Ionic Framework ionic-v3
1

Hi there

I have a list of items. I have functions to change the order of the items in the list and a function to filter out items based on certain conditions.

The order function works as it should.

If I use a “regular” ngFor everything works as expected. When using a virtualScroll list I’m having issues when the filter makes the list empty. In that case the view won’t update.

I have created a plunker to demonstrate the issue.

Thanks in advance for input.

Disclaimer: I am new at typescript and ionic, so it’s very likely something I did wrong.

2

Hi,
That’s a bug. While the last entry of the VirtualScroll array will be deleted, the object won’t update so that it will remain until refresh. I had the same problem and used ngFor instead, however I’m afraid it lacks performance vs. VirtualScroll.

3

Hi

Yeah I did the same thing. Hoping for a fix some day :slight_smile:

4

A solution might be to init an empty array as first item and have it not displayed (using ngIf). I’ll give it a try and keep you posted.

5

Ok, found a workaround:

Assume you have an items array (comes from an HTTP request in my case, but makes no difference):

items: Array<any>;

Init the array first entry, then populate your real data, i.e.:

this.items = data.items;
this.items.unshift([{}]);

In your template:

<ion-item-sliding *virtualItem=“let item;let index = index”>
<ion-item *ngIf=“index==0” [hidden]=“!0”>
</ion-item>
<ion-item *ngIf=“index>0” (click)=“presentViewModal(item.uid)”>
…

1 Like